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

Question

我有一个textbox 和一个checkbox，当checkbox 未选中时，我需要禁用textbox，当用户选择checkbox 时，我想重新启用@987654329 @。

我试过这个：

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

根据您的 OP，它看起来像是您在跨度上的绑定。将其更改为绑定在您的复选框上。还将绑定从单击更改为更改。 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'));
});

Answer 2

在呈现的代码中，您不再有一个带有类 cbStopReason 的复选框——该类应用于 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

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