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
– Marco Dinatsoli, Commented May 5, 2015 at 22:52
@BryanDowning but you have used a different html that mine, i updated the question and added the generated html — Marco Dinatsoli
– Marco Dinatsoli, Commented May 5, 2015 at 23:01
This may help: jsfiddle.net/SPddm stackoverflow.com/questions/13831601/… — P Clegg
– P Clegg, Commented May 5, 2015 at 23:05

Taplar · Accepted Answer · 2015-05-05 23:33:05Z

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 5, 2015 at 23:33

answered May 5, 2015 at 23:24

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marco Dinatsoli Over a year ago

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 Over a year ago

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

bdimag · Accepted Answer · 2015-05-05 23:07:35Z

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 5, 2015 at 23:07

bdimag

9638 silver badges11 bronze badges

4 Comments

Marco Dinatsoli Over a year ago

could you give me a working jsfiddle? or at least tell me what would my code look like for the true and false condisions

bdimag Over a year ago

jsfiddle.net/9vLtpqtt/5 simply add .find("input") before the .attr in your if

Marco Dinatsoli Over a year ago

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 Over a year ago

I tried to do this alert($(this).find("input").attr('checked')); before the if statement, and i kept getting undifinied printed

emerson.marini · Accepted Answer · 2015-05-05 23:33:11Z

0

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

edited May 5, 2015 at 23:33

answered May 5, 2015 at 23:18

emerson.marini

9,3462 gold badges35 silver badges50 bronze badges

Comments

Rouger · Accepted Answer · 2015-05-05 22:55:44Z

-1

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

answered May 5, 2015 at 22:55

Rouger

6617 silver badges15 bronze badges

3 Comments

Marco Dinatsoli Over a year ago

I already did that before asking the question here, and I still have the same problem that is described on the question

Rouger Over a year ago

But does the browser shows the alert when you activate the checkbox?

Marco Dinatsoli Over a year ago

the alert is always the one that is written in the false part

Collectives™ on Stack Overflow

jquery when checkbox is not checked hide a textbox

4 Answers 4

2 Comments

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related