jquery 未选中复选框时隐藏文本框

Question

我有一个 textbox 和一个 checkbox，当 checkbox 未选中时，我需要禁用 textbox 并且当用户选择 checkbox, 我想重新启用 textbox.

我试过这个：

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 代码已经在 document ready function 中，但问题是我的代码可以很好地禁用 textbox，但无法重新启用它，请问我做错了什么？

更新 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

改用if ($(this).is(':checked'))。

Answer 2

在呈现的代码中，您不再有带有 class cbStopReason 的复选框 - class 应用于 span 并且跨度永远不会成为 checked.

一个解决方法是将条件更改为：

$(this).find("input").attr('checked')

Answer 3

您将事件处理程序绑定到错误的元素（选择器）。此外，您可以大大减少代码。

我会这样做：

$(function () {
    // On the checkbox click.
    // Here I would give these checkboxes a particular class
    // to use on the selector.
    $('.checkConfiguration input[type=checkbox]').on('click', function () {
        // Go to its parent and look for the input.
        // Enable/disable it according to the checkbox 
        // checked value.
        $(this).closest('.checkConfiguration')
            .find('input[type=text]')
            .prop('disabled', !$(this).is(':checked'));
    });
});

Demo

Answer 4

根据您的 OP，您的 span 似乎是绑定的。将其更改为绑定在您的复选框上。还将绑定从单击更改为更改。 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'));
});

一般使用 class，但不是复选框的 ID。只是使用了不同的选择器。

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

jquery 未选中复选框时隐藏文本框

jquery when checkbox is not checked hide a textbox

javascript

asp.net

checkbox

jquery