jquery禁用使用复选框的文本框（复选框为多个文本框）

Question

我试图在用户选中复选框时禁用文本框。

我已经完成了一个单一的文本框和复选框。

我现在卡住了什么，如果用户可以添加多个文本框与复选框？

这里是我的输出看起来到目前为止。

什么我的输出具有的是，每当我剔的复选框残疾人ATTR只是切换上一个文本框到另一个。

我想要做的是，当复选框被选中时，文本框仍然保持禁用，直到我取消其各自的复选框。

这是我编码到目前为止。

HTML

<div id="operator_properties"> 
     <label for="operator_title">Operator's title: </label> <input type="text" id="operator_title"> 
     <br /><br /> 
     <button id="append" class="btn btn-primary">Add Connectors</button> 
     <br /><br /> 
     <div class="col-md-10"> 
      <div id="parent"></div> 
     </div> 
     <div class="clearfix"></div> 
     <hr /> 
     <div class="col-md-12"> 
      <button class="btn btn-success" id="operator_btn"> 
       Confirm 
      </button> 
     </div> 
     <div class="clearfix"></div> 
    </div> 

jQuery的

$(function() { 
    var count = 1; 
    $('#append').click(function() { 
     $('#parent').append('<div class="operator"> <div class="row"> <div class="col-md-2"><input type="text" id="input' + count + '" class="input-text" placeholder="Input' + count + ' title"><br /> <input type="checkbox" id="disableinput' + count + '" class="disable-input" /><label for="disableinput' + count + '" style="vertical-align: middle;"> &nbsp; Disable</label> </div> &nbsp <div class="col-md-3"><input type="text" id="output' + count + '" class="output-text" placeholder="Output' + count + ' title"> <a href="#" id="' + count + '" class="remove">Remove</a> <br /> <input type="checkbox" id="disableoutput' + count + '" class="disable-output" /><label for="disableoutput' + count + '"style="vertical-align: middle;"> &nbsp; Disable</label></div></div></div>'); 
     count++; 
    }); 
}); 

$(document).on('click', '.remove', function() { 
    $(this).closest("div.operator").remove(); 
}); 

$(document).on('change', '.disable-input', function() { 
    $("#parent").find("input.input-text").attr("disabled", false); 
    if ($(this).is(":checked")) 
     $(this).parent().find("input.input-text").attr("disabled", true); 
    //console.log('working'); 
}); 

在先进的感谢！

Answer 1

删除以下行：

$("#parent").find("input.input-text").attr("disabled", false); 

...因为这是使#parent元素中的所有输入。

你似乎已经知道如何使用$(this).parent(...).find(...)得到有关被点击项目的文本框，所以只是修改代码：

$(document).on('change', '.disable-input', function() { 
    $(this).parent().find("input.input-text").prop("disabled", this.checked); 
}); 

注意，你可以简单地使用this.checked而非$(this).is(":checked")) - 更高效，更容易阅读。此外，使用.prop()而不是.attr()来处理这些动态状态更改。

Answer 2

试试这个，你被设置为禁用=假

$(function() { 
    var count = 1; 
    $('#append').click(function() { 
     $('#parent').append('<div class="operator"> <div class="row"> <div class="col-md-2"><input type="text" id="input' + count + '" class="input-text" placeholder="Input' + count + ' title"><br /> <input type="checkbox" id="disableinput' + count + '" class="disable-input" /><label for="disableinput' + count + '" style="vertical-align: middle;"> &nbsp; Disable</label> </div> &nbsp <div class="col-md-3"><input type="text" id="output' + count + '" class="output-text" placeholder="Output' + count + ' title"> <a href="#" id="' + count + '" class="remove">Remove</a> <br /> <input type="checkbox" id="disableoutput' + count + '" class="disable-output" /><label for="disableoutput' + count + '"style="vertical-align: middle;"> &nbsp; Disable</label></div></div></div>'); 
     count++; 
    }); 
}); 

$(document).on('click', '.remove', function() { 
    $(this).closest("div.operator").remove(); 
}); 

$(document).on('change', '.disable-input', function() { 

    //$("#parent").find("input.input-text").attr("disabled", false); 
    if ($(this).is(":checked")) 
    { 
     $(this).parent().find("input.input-text").attr("disabled", true); 
    } 
    else if($(this).not(":checked")){ 
     $(this).parent().find("input.input-text").attr("disabled", false); 
    } 
    //console.log('working'); 
});