Javascript jquery使用复选框禁用文本框（带有复选框的多个文本框）

每当用户选中复选框时，我都试图禁用文本框

我已经用一个文本框和复选框完成了

我现在被卡住了，如果用户可以用复选框添加多个文本框怎么办

以下是我目前的输出

我的输出是，每当我在复选框上打勾时，禁用的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');
});

$（函数（）{
var计数=1；
$（'#append'）。单击（函数（）{
$（“#父项”）.append（“
禁用
禁用”）；
计数++；
});
});
$（文档）.on（'单击'，'.remove'，函数（）{
$（this）.closest（“div.operator”）.remove（）；
});
$（文档）。在（'更改'，'上。禁用输入'，函数（）{
$（“#parent”）.find（“input.input text”）.attr（“disabled”，false）；
如果（$（this）.is（“：checked”））
$（this.parent（）.find（“input.input text”）.attr（“disabled”，true）；
//console.log（'working'）；
});

---

提前感谢

删除以下行：

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

。

试试这个，您通过设置disabled=false来启用所有属性

$(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');
});

$（函数（）{
var计数=1；
$（'#append'）。单击（函数（）{
$（“#父项”）.append（“
禁用
禁用”）；
计数++；
});
});
$（文档）.on（'单击'，'.remove'，函数（）{
$（this）.closest（“div.operator”）.remove（）；
});
$（文档）。在（'更改'，'上。禁用输入'，函数（）{
//$（“#parent”）.find（“input.input text”）.attr（“disabled”，false）；
如果（$（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'）；
});

您甚至可以将

.parent（）。但实际上我更喜欢
.closest（…）.find（…）
，而不是
.parent（）.find（…）
或
.sides（）
，因为这样，如果你决定修改HTML，在任何一个元素周围添加额外的包装元素（或将其中一个元素移到标签内），JS将继续工作，而无需修改。我同意！我认为你甚至应该改变你的答案，因为那样会更可靠！