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

I have a textbox and a checkbox, when the checkbox is unchecked, I need to disabled the textbox and when the user selects the checkbox, I want to re-enable the textbox.

我有一个文本框和一个复选框,当取消选中该复选框时,我需要禁用文本框,当用户选中该复选框时,我想重新启用文本框。

I tried this:

我试过这个:

ASP.NET code:

<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 code

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

The jQuery code is already in document ready function, but the problem is that my code works good to disable the textbox, but it doesn't work to re-enable it, what wrong did I do please?

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

Update 1: This is the actual HTML that is being generated

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

4 个解决方案

#1

According to your OP, it looks like your binding on your span. Changed it to bind on your checkbox. Also changed the bind from click to change. http://jsfiddle.net/0fL0pumf/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);
    }
});

Reduced the javascript...

减少了javascript ...

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

Generic to use the class, but not the id of the checkbox. Just uses a different selector.

通用使用类,但不是复选框的id。只需使用不同的选择器。

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

#2

In the rendered code, you no longer have a checkbox with the class cbStopReason -- that class is applied to the span and the span will never be checked.

在渲染的代码中,您不再具有类cbStopReason的复选框 - 该类将应用于跨度,并且永远不会检查跨度。

One fix is to change the conditional to:

一个修复是将条件更改为:

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

#3

You're binding the event handler to the wrong element (selector). Also, you can reduce your code quite a lot.

您将事件处理程序绑定到错误的元素(选择器)。此外,您可以相当多地减少代码。

I would do it like this:

我会这样做:

$(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

#4

Use if ($(this).is(':checked')) instead.

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

#1