Why isn't my javascript/jquery code working as expected for checkboxes
<p>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?</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(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 &lt; 4; i++ ){
           var elem = $("input[type=checkbox][name*=checkbox"+i+"]");
           elem.click();
           if( i != whats_selected ){
             elem.prop("disabled", true);
           }else{
             elem.removeAttr("disabled");
           }
         }
        });
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Checkbox play&lt;/h1&gt;
    &lt;h3&gt;My 4 Radio Buttons&lt;/h3&gt;

    &lt;input type="radio" name='radio_group' value=0&gt;Zero&lt;br&gt;
    &lt;input type="radio" name='radio_group' value=1&gt;One&lt;br&gt;
    &lt;input type="radio" name='radio_group' value=2&gt;Two&lt;br&gt;
    &lt;input type="radio" name='radio_group' value=3&gt;Three&lt;br&gt;

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