How to select checkbox name with array

Question

I am trying to disable other checkboxes with same name if one of the checkbox is selected. Here is my code:

<div id="selectSessionEvening" class="sessionEvening">
    <p style="font-weight:bold;">Evening Session</p>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="4:00 PM - 5:00 PM" id="four-five" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime">
        <label class="form-check-label" for="four-five">4:00 PM - 5:00 PM</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="5:00 PM - 6:00 PM" id="five-six" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime">
        <label class="form-check-label" for="five-six">5:00 PM - 6:00 PM</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="6:00 PM - 7:00 PM" id="six-seven" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime">
        <label class="form-check-label" for="six-seven">6:00 PM - 7:00 PM</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="7:00 PM - 8:00 PM" id="seven-eight" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime">
        <label class="form-check-label" for="seven-eight">7:00 PM - 8:00 PM</label>
    </div>
</div>

Here is the JS:

$('input[name=sessionTime]').change(function(){
    if($(this).is(':checked')){
        $('input[name=sessionTime]').attr('disabled',true);
        $(this).attr('disabled', false);
        console.log('disabled');
    } else {
        $('input[name=sessionTime]').attr('disabled', false);
        console.log('not disabled');
    }
});

The Code is working fine this way. Now, What I need to do is I need to pass each checked checkbox in next form so I needed to write element name as selectTime[] After doing this My JS is not working now. I have searched for the solution but couldn't get working for me. Do you have any solution for this?

Here is the updated code:

<div id="selectSessionEvening" class="sessionEvening">
                      <p style="font-weight:bold;">Evening Session</p>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="4:00 PM - 5:00 PM" id="four-five" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]">
                        <label class="form-check-label" for="four-five">4:00 PM - 5:00 PM</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="5:00 PM - 6:00 PM" id="five-six" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]">
                        <label class="form-check-label" for="five-six">5:00 PM - 6:00 PM</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="6:00 PM - 7:00 PM" id="six-seven" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]">
                        <label class="form-check-label" for="six-seven">6:00 PM - 7:00 PM</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="7:00 PM - 8:00 PM" id="seven-eight" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]">
                        <label class="form-check-label" for="seven-eight">7:00 PM - 8:00 PM</label>
                      </div>
                    </div>

Here is the working jsfiddle: https://jsfiddle.net/humanware/y1c330f8/4/

UPDATE: I tried doing this in JS:

$('input[name=sessionTime[]]').change(function(){
    if($(this).is(':checked')){
        $('input[name=sessionTime[]]').attr('disabled',true);
        $(this).attr('disabled', false);
        console.log('disabled');
    } else {
        $('input[name=sessionTime[]]').attr('disabled', false);
        console.log('not disabled');
    }
});

But Got This Error:

I am trying to disable other checkboxes with same name if one of the checkbox is selected. Isn't that what radio buttons are for? Also, $('input[name=sessionTime]') won't select anything as that's not the name you gave them (in your fiddle). Read up on escaping special characters in selectors. Finally, use .prop() with disabled, not .attr() — j08691
– j08691, Commented Jun 1, 2018 at 17:13
Yes. But This is conditional. Like, I have huge form, if a selectbox has certain value then user should select only one checkbox. Otherwise they can select multiple checkboxes. — Milan Bastola
– Milan Bastola, Commented Jun 1, 2018 at 17:15
Not sure why you're trying to use brackets in the input names. You could instead reference each input's value from the array of $('.form-check-input') — Tom
– Tom, Commented Jun 1, 2018 at 17:22
You're better off restyling radio buttons as checkboxes, rather than trying to achieve mutual exclusivity programmatically. As @j08691 points out, radio buttons have your desired behavior built in. stackoverflow.com/questions/279421/… — Cybernetic
– Cybernetic, Commented Jun 1, 2018 at 17:27
@Cybernetic As I've already mentioned, User should select only one checkbox if one of the condition match in my large form. instead they can select multiple checkboxes. — Milan Bastola
– Milan Bastola, Commented Jun 1, 2018 at 17:37

Bhushan Kawadkar · Accepted Answer · 2018-06-01 17:21:52Z

1

Try this: User quotes around name when there is special characters in the name.

I have modified your code little here - use this

$('input[name="sessionTime[]"]').change(function(){
  var checked = $(this).is(':checked');
    if(checked){
        $('input[name="sessionTime[]"]').not(this).prop('disabled',checked);
    } else {
        $('input[name="sessionTime[]"]').prop('disabled', checked);
        console.log('not disabled');
    }
});

JSFiddle

answered Jun 1, 2018 at 17:21

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

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

3 Comments

fethe Over a year ago

I don't think you should use brackets after sessionTime

Bhushan Kawadkar Over a year ago

actually name of input contains brackets and hence it needs to be in quotes otherwise jquery will not undestand it properly

Milan Bastola Over a year ago

@BhushanKawadkar Your solution is working fine. But is it good to use this method?

Collectives™ on Stack Overflow

How to select checkbox name with array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related