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()这些动态状态更改.