Why isn't my javascript/jquery code working as expected for checkboxes

Question

I have a code where I expect my checkboxes to be selected and disabled. When I click Zero, all checkboxes should be highlighted, all checkboxes except zeroth checkbox should be disabled. Similarly for one, two and three radio buttons. This does not seem to happen consistently. I am trying it on chrome browser version 48.0.2564.116. Also, the behavior is horrible on Firefox. Can someone please let me know what I am doing wrong?

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("input[name=radio_group]").prop("checked", false);
        $("input[type=radio]").click( function( e ){
           var whats_selected = $("input[name=radio_group]:checked").val()
           $("input[type=checkbox]").attr('checked',false );

         //disable all other checkboxes
         for(i=0; i < 4; i++ ){
           var elem = $("input[type=checkbox][name*=checkbox"+i+"]");
           elem.click();
           if( i != whats_selected ){
             elem.prop("disabled", true);
           }else{
             elem.removeAttr("disabled");
           }
         }
        });
      });
    </script>
  </head>
  <body>
    <h1>Checkbox play</h1>
    <h3>My 4 Radio Buttons</h3>

    <input type="radio" name='radio_group' value=0>Zero<br>
    <input type="radio" name='radio_group' value=1>One<br>
    <input type="radio" name='radio_group' value=2>Two<br>
    <input type="radio" name='radio_group' value=3>Three<br>

    <p>And here are my checkboxes</p>    
    <input type='checkbox' id="chkbox0" name="checkbox0" value="checkbox0">Checkbox Zero<br>
    <input type='checkbox' id="chkbox1" name="checkbox1" value="checkbox1">Checkbox One<br>
    <input type='checkbox' id="chkbox2" name="checkbox2" value="checkbox2">Checkbox Two<br>
    <input type='checkbox' id="chkbox3" name="checkbox3" value="checkbox3">Checkbox Three<br>
  </body>
</html>

@RejithRKrishnan prop() requires a property name and value if using as setter — charlietfl
– charlietfl, Commented May 28, 2016 at 17:14

Pevara · Accepted Answer · 2016-05-28 17:21:56Z

2

I think this should do the trick (if I get your question correctly)

  $("input[type=radio]").click(function(e) {
    var whats_selected = $(this).val();
    // check an disable all checboxes
    $("input[type=checkbox]")
      .attr('checked', true)
      .prop('disabled', true);
    // enable the targetted checkbox
    $('#chkbox' + whats_selected)
      .prop('disabled', false);
  });

Have a look at the demo: https://jsfiddle.net/a5og0soL/

answered May 28, 2016 at 17:21

Pevara

14.3k1 gold badge37 silver badges49 bronze badges

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

4 Comments

cssyphus Over a year ago

I don't think you need $("input[name=radio_group]").prop("checked", false); -- the radio buttons should do that by default. Otherwise, +1.

sri_84 Over a year ago

This works for Chrome but not on firefox. Firefox version is 46.0.1

Pevara Over a year ago

@gibberish You mean in the fiddle right? True, I just copied a bit to much from the OP code...

Pevara Over a year ago

@sri_84 works fine for me in Firefox 46.0.1 on Mac. Are you testing the fiddle or your own (edited) code? Perhaps something else is interfering...

cssyphus · Accepted Answer · 2016-05-28 17:53:00Z

1

Here is another way to do it, matching the index of the radio/checkbox pair:

jsFiddle Demo

var ndx;
$(document).ready(function() {

  $("input[type=radio]").click(function() {
	ndx = $("input[type=radio]").index(this);
    $("input[type=checkbox]").attr('checked', true).prop('disabled', true);
    $("input[type=checkbox]").eq(ndx).prop('disabled',false);
  });

}); //END document.ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>My 4 Radio Buttons</h3>

<input type="radio" name='radio_group' value=0>Zero
<br>
<input type="radio" name='radio_group' value=1>One
<br>
<input type="radio" name='radio_group' value=2>Two
<br>
<input type="radio" name='radio_group' value=3>Three
<br>

<p>And here are my checkboxes</p>
<input type='checkbox' id="chkbox0" name="checkbox0" value="checkbox0">Checkbox Zero
<br>
<input type='checkbox' id="chkbox1" name="checkbox1" value="checkbox1">Checkbox One
<br>
<input type='checkbox' id="chkbox2" name="checkbox2" value="checkbox2">Checkbox Two
<br>
<input type='checkbox' id="chkbox3" name="checkbox3" value="checkbox3">Checkbox Three
<br>

answered May 28, 2016 at 17:53

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

2 Comments

Pevara Over a year ago

Why dit you make ndx a global? Also, you are assuming the radios and checkboxes will always be in the same order. That may work today but doesn't seem very future proof imo.

cssyphus Over a year ago

You are right - ndx doesn't need to be a global. When I started writing my answer, I was intending to remember the last-checked radio, but then didn't need to. Also, I was still remembering a previous question that was quite similar and was probably getting the two a bit confuzzled. As for matching the order, I only demonstrated that method because that was how OP did it, so just in case that was required.

Collectives™ on Stack Overflow

Why isn't my javascript/jquery code working as expected for checkboxes

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related