Trying to enable/disable inputs inside <div> based on checkbox list selection(s)

Question

I have used the following code with radio button lists (generally 2 choices). This has allowed me to place another input (textbox, another radio button list, etc.) inside a <div> that would be hidden until a button was clicked.

<script type="text/javascript">
    $(document).ready(function () {
        $("input[name$='RadioButton1']").on ( "change", function() {

            if (this.value == "Yes") {
                $('#someDisplay, #someDisplay input').show().removeAttr("disabled");
            }
            else {
                $('#someDisplay, #someDisplay input').hide().attr("disabled", "disabled");
            }
    });
        $("#someDisplay, #someDisplay input").hide().attr("disabled", "disabled");
    });
</script>

Again, the great thing about this is that the input inside the <div> would remain disabled if nothing was clicked, which meant that no information was passed when the form was submitted (i.e., the input was "empty" or "null" and nothing had to be saved).

Now I am trying to use this code to work with a checkbox list. Unfortunately, if you clicked all the checkboxes it would only show the last clicked checkbox <div> even though prior checkboxes were clicked. I tried using JQuery toggle(), and while it would show/hide the <div> corresponding to what was clicked, the problem is if you un-clicked a checkbox, the input that was inside the <div> would remain enabled. Sorry if I am not clear. Here is what I tried:

<script type="text/javascript">
    $(document).ready(function () {
        $("input[name$='Checkbox1']").on ( "change", function() {

            if (this.value == "Choice 1") {
                $('#someDisplay1, #someDisplay1 input').show().removeAttr("disabled");
            }
            else {
                $('#someDisplay1, #someDisplay1 input').hide().attr("disabled", "disabled");
            }

            if (this.value == "Choice 2") {
                $('#someDisplay2, #someDisplay2 input').show().removeAttr("disabled");
            }
            else {
                $('#someDisplay2, #someDisplay2 input').hide().attr("disabled", "disabled");
            }
    });
        $("#someDisplay1, #someDisplay1 input").hide().attr("disabled", "disabled");
        $("#someDisplay2, #someDisplay2 input").hide().attr("disabled", "disabled");
    });
</script>

I was thinking that it might have been the logic of the if/else.

And this is the checkbox input html:

<ol>
    <li>
        <label>
            <input name="Checkbox1" type="checkbox" value="Choice 1" data-val="true">
            Choice 1
        </label>
    </li>
    <li>
        <label>
            <input name="Checkbox1" type="checkbox" value="Choice 2">
            Choice 2
        </label>
    </li>
</ol>

Thank you in advance for any help.

EDIT: To add the hidden <div>: EDIT2: Accidently deleted disabled="disabled"

<div disabled="disabled" id="someDisplay1" style="display: none;">
    <div class="form-group">
    <label>Display 1</label>
    <input name="TextBox1" style="display: none;" type="text" value="" />
    </div>
</div>

How about the HTML for the divs. Can you post the full structure of your inputs and the divs — Tim S.
– Tim S., Commented Dec 4, 2016 at 21:00
Is your problem how to submit in the form only the visible items ? — Vanquished Wombat
– Vanquished Wombat, Commented Dec 4, 2016 at 21:01
@TimS. Edited to add the hidden <div>. Note that when a click occurs the display: turns to block in the first <div> and for the <input> it becomes inline-block. — REMESQ
– REMESQ, Commented Dec 4, 2016 at 21:10
@VanquishedWombat That is somewhat the problem. I can use toggle() instead, but what happens is that all the inputs corresponding to the checkbox originally clicked - but then later un-clicked - would remain enabled and submit a "false" or "default" value, which is not what I want. If it is not checked I don't want any value submitted for the corresponding <div> that is hidden. — REMESQ
– REMESQ, Commented Dec 4, 2016 at 21:11

Vanquished Wombat · Accepted Answer · 2016-12-04 22:59:06Z

1

Maybe you could use something like

$("#the_form_id").on("submit", function(e){ 
    $("input").filter(":hidden").remove()
})

The concept is to erase all the hidden form elements just prior to the submit of the form. The .filter(":hidden") is a JQuery extension so we use the faster $("input") selector first then operate on the results with the filter. Hidden looks at the element itself AND its ancestors to determine if the element is hidden.

This will of course remove those hidden elements so if you were submitting by Ajax and needed to re-use the form them you could create a new form and clone the visible form elements into it.

answered Dec 4, 2016 at 22:59

Vanquished Wombat

9,6037 gold badges39 silver badges81 bronze badges

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

1 Comment

REMESQ Over a year ago

Surprisingly, this worked to remove the unselected <div>'s from the form submission. Instead of using the code above with show() and hide(), I used toggle(). I also removed the disabling code and opted to replace it with css({'display': 'none'}); for each of the <div>'s.

Collectives™ on Stack Overflow

Trying to enable/disable inputs inside <div> based on checkbox list selection(s)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related