在该行上设置输入的属性答案

【问题标题】：set attr of inputs on this row在该行上设置输入的属性
【发布时间】：2011-01-16 03:21:32
【问题描述】：

我有一个 3 行的表

 <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>

Jquery 当有人单击复选框时，我想更改该行上 2 个输入的属性并使其可编辑，但如果有人单击另一行上的复选框，则必须禁用先前启用的输入并启用新的输入

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

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

   });

【问题讨论】：

标签： jquery

【解决方案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
});

【讨论】：

感谢您的解释很容易理解，感谢您和所有其他回答者的帮助
有点晚了，但这段代码对我来说表现不正常 - 行被禁用和启用不当（尝试过 JQuery 1.4 和 1.6）

【解决方案2】：

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

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

演示： http://jsfiddle.net/marcuswhybrow/8WtvK/

【讨论】：

我也遇到过类似的情况，并且能够让它做我需要的事情。谢谢，提示，请注意，对于 JQuery 1.6 或更高版本，您需要将 .attr 更改为 .prop。

【解决方案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/

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

【讨论】：