javascript - jquery 当未选中复选框时隐藏文本框

Question

我有一个文本框和一个复选框，当复选框未选中时，我需要禁用文本框 > 当用户选择复选框时，我想重新启用文本框。

我尝试过这个:

ASP.NET 代码:

<div class="checkConfiguration">
    <asp:CheckBox runat="server" ID="stopGeneralNumber" Text="General Number"   CssClass="cbStopReason" Checked="false" />
    <asp:TextBox runat="server" Enabled="false"></asp:TextBox>
</div>

jQuery 代码

 $('.cbStopReason').on('click', function () {
        if ($(this).attr('checked')) {
            alert("now checked");
            $(this).nextAll("input").removeAttr("disabled");
        } else {
            alert("now un checked");
            $(this).nextAll("input").attr("disabled", "disabled"); 
        }
    })

jQuery 代码已经在文档就绪函数中，但问题是我的代码可以很好地禁用文本框，但它无法重新启用它，请问我做错了什么？

更新 1:这是正在生成的实际 HTML

 <div class="configurationData">
                            <div class="checkConfiguration">
                                <span class="cbStopReason"><input id="stopUrgentNumber" type="checkbox" name="stopUrgentNumber"><label for="stopUrgentNumber">Urgent Number</label></span>
                                <input name="ctl17" type="text" disabled="disabled" class="aspNetDisabled">
                            </div>
                            <div class="checkConfiguration">
                                <span class="cbStopReason"><input id="stopNurseNurse" type="checkbox" name="stopNurseNurse"><label for="stopNurseNurse">Nurse Number</label></span>
                                <input name="ctl18" type="text" disabled="disabled" class="aspNetDisabled">
                            </div>
                            <div class="checkConfiguration">
                                <span class="cbStopReason"><input id="stopScheduledNumber" type="checkbox" name="stopScheduledNumber"><label for="stopScheduledNumber">Scheduled Number</label></span>
                                <input name="ctl19" type="text" disabled="disabled" class="aspNetDisabled">
                            </div>
                            <div class="checkConfiguration">
                                <span class="cbStopReason"><input id="stopClockNumber" type="checkbox" name="stopClockNumber"><label for="stopClockNumber">Clock Number</label></span>
                                <input name="ctl20" type="text" disabled="disabled" class="aspNetDisabled">
                            </div>
                            <div class="checkConfiguration">
                                <span class="cbStopReason"><input id="stopLastCheckNumber" type="checkbox" name="stopLastCheckNumber"><label for="stopLastCheckNumber">Last Check Number</label></span>
                                <input name="ctl21" type="text" disabled="disabled" class="aspNetDisabled">
                            </div>
                            <div class="checkConfiguration">
                                <span class="cbStopReason"><input id="stopArrivalNumber" type="checkbox" name="stopArrivalNumber"><label for="stopArrivalNumber">Arrival Number</label></span>
                                <input name="ctl22" type="text" disabled="disabled" class="aspNetDisabled">
                            </div>
                            <div class="checkConfiguration">
                                <span class="cbStopReason"><input id="stopGeneralNumber" type="checkbox" name="stopGeneralNumber"><label for="stopGeneralNumber">General Number</label></span>
                                <input name="ctl23" type="text" disabled="disabled" class="aspNetDisabled">
                            </div>
                        </div>

Answer 1

根据你的OP，它看起来像是你的跨度上的绑定(bind)。将其更改为绑定(bind)在您的复选框上。还将绑定(bind)从单击更改为更改。 http://jsfiddle.net/0fL0pumf/1/

$('#stopGeneralNumber').on('change', function () {
    var $this = $(this);

    if ($this.is(':checked')) {
        $this.parent().nextAll("input").prop("disabled", false);
    } else {
        $this.parent().nextAll("input").prop("disabled", true);
    }
});

减少了 JavaScript...

$('#stopGeneralNumber').on('change', function () {
    $(this).parent().nextAll("input").prop("disabled", !$(this).is(':checked'));
});

通用使用类，但不使用复选框的 ID。只是使用不同的选择器。

$('.cbStopReason > input[type=checkbox]').on('change', function () {
    var $this = $(this);
    $this.parent().nextAll("input").prop("disabled", !$this.is(':checked'));
});