设置该行输入的属性

Question

我有一个包含 3 行 Jquery 的表，

 <table id="table1">
 <tr>
 <td><input type="text" disabled="disabled" value="200"/></td>
 <td><input type="text" disabled="disabled" value="300"/></td>
 <td><input type="checkbox"/></td>
 <tr>
 <tr>
 <td><input type="text" disabled="disabled" value="400"/></td>
 <td><input type="text" disabled="disabled" value="600"/></td>
 <td><input type="checkbox"/></td>
 <tr>
 </table>

当有人单击复选框时，我想更改该行上 2 个输入的 attr 并使它们可编辑，但如果有人单击另一行上的复选框，则必须禁用先前启用的输入，并且新的输入将被禁用。一个已启用

这就是我的想法，但它不起作用

   $("#table1 :checkbox").click(function(){
   $(this).parent(":input[type='text']").attr('disabled',false);

   });

Answer 1

parent(":input[type='text']") 表示“如果它是类型为 text 的输入元素，请给我父节点。这显然不是”不是你想要的！你需要使用find：

$("#table1 :checkbox").click(function(){
    $(this)
       .closest('tr') // find the parent row
           .find(":input[type='text']") // find text elements in that row
               .attr('disabled',false) // enable them
           .end() // go back to the row
           .siblings() // get its siblings
               .find(":input[type='text']") // find text elements in those rows
                   .attr('disabled',true); // disable them
});

Answer 2

您可以观察所有复选框的更改，这些更改将在选择和取消选择时触发。如果选择，我们可以将 disabled 属性设置为空字符串以“启用”，如果取消选择“disabled”以重新禁用输入：

$('#table1 :checkbox').change(function() {
    $(this).closest('tr').find('input[type="text"]').attr('disabled',
        this.checked ? '' : 'disabled'
    );
});

DEMO： http://jsfiddle.net/marcuswhybrow/8WtvK/

Answer 3

$('#table1 input:checkbox').click(function() {
    var row = $(this).closest('tr');

    row.find('input:text').attr('disabled', false);
    row.siblings().find('input:text').attr('disabled', true);
});

现场演示： http://jsfiddle.net/buAmd/< /a>

我在演示中使用了单选框，因为两个框不能同时选中。