jquery when checkbox is not checked hide a textbox

Question

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?

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

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

@BryanDowning i just tried your suggestion, i put your code in the `if` statement and I still have the same problem that is described on the question — Marco Dinatsoli, May 05 '15 at 22:52
Seems to work for me: http://jsfiddle.net/bryandowning/wcktqdnt/ — Bryan Downing, May 05 '15 at 22:57
@BryanDowning but you have used a different html that mine, i updated the question and added the generated html — Marco Dinatsoli, May 05 '15 at 23:01
This may help: http://jsfiddle.net/SPddm/ http://stackoverflow.com/questions/13831601/disabling-and-enabling-a-html-button — P Clegg, May 05 '15 at 23:05
@PhilipClegg I will try your suggestion, however, the problem is that the `alert` always shows the false message, — Marco Dinatsoli, May 05 '15 at 23:08
@PhilipClegg i already put the html that is being generated, the one you gave me is different that the html i am using, could you check please — Marco Dinatsoli, May 05 '15 at 23:09

Taplar · Accepted Answer · 2015-05-05T23:33:05.330

2

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/

$('#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...

$('#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.

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

edited May 05 '15 at 23:33

answered May 05 '15 at 23:24

Taplar

24,788
4
22
35

i can't use the `id`, i must use the `class` because i have too many check box and i want to treat them all using the `class`, i just updated my question to give u the five checkbox that i have – Marco Dinatsoli May 05 '15 at 23:30
i tried your code, and i still face the same proboem, i am thinking maybe because you tried your code on just one checkbox while i have fife of them, i updated the quesiotn to give u my generated html – Marco Dinatsoli May 05 '15 at 23:32

score 0 · Answer 2 · answered May 05 '15 at 23:07

0

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.

One fix is to change the conditional to:

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

answered May 05 '15 at 23:07

bdimag

953
8
11

could you give me a working jsfiddle? or at least tell me what would my code look like for the true and false condisions – Marco Dinatsoli May 05 '15 at 23:12
http://jsfiddle.net/9vLtpqtt/5/ simply add `.find("input")` before the `.attr` in your `if` – bdimag May 05 '15 at 23:14
the code you put is not working on my machine though it is working good on jsfiddle, i can't find the problem, i gave u the code, how can it works on jsffidle but not on my machine please? – Marco Dinatsoli May 05 '15 at 23:19
I tried to do this `alert($(this).find("input").attr('checked'));` before the `if` statement, and i kept getting `undifinied` printed – Marco Dinatsoli May 05 '15 at 23:24

emerson.marini · Answer 3 · 2015-05-05T23:33:11.723

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

score -1 · Answer 4 · answered May 05 '15 at 22:55

-1

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

answered May 05 '15 at 22:55

Rouger

543
5
13

I already did that before asking the question here, and I still have the same problem that is described on the question – Marco Dinatsoli May 05 '15 at 22:56
But does the browser shows the alert when you activate the checkbox? – Rouger May 05 '15 at 23:00
the alert is always the one that is written in the `false` part – Marco Dinatsoli May 05 '15 at 23:02

jquery when checkbox is not checked hide a textbox

4 Answers4