Question

我有一个包含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个输入的attr并使它们可编辑但如果有人点击另一行的复选框，则必须禁用先前启用的输入并启用新的输入

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

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

   });

Answer 1

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

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

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

Answer 2

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

$("#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 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/

我在演示中使用了无线电盒，因为这两个盒子不能同时检查。

在此行上设置输入的attr

3 个答案: