title: How to select checkbox name with array
body: <p>I am trying to disable other checkboxes with same name if one of the checkbox is selected. Here is my code: </p>
  
  <pre><code>&lt;div id="selectSessionEvening" class="sessionEvening"&gt;
      &lt;p style="font-weight:bold;"&gt;Evening Session&lt;/p&gt;
      &lt;div class="form-check"&gt;
          &lt;input class="form-check-input" type="checkbox" value="4:00 PM - 5:00 PM" id="four-five" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime"&gt;
          &lt;label class="form-check-label" for="four-five"&gt;4:00 PM - 5:00 PM&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="form-check"&gt;
          &lt;input class="form-check-input" type="checkbox" value="5:00 PM - 6:00 PM" id="five-six" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime"&gt;
          &lt;label class="form-check-label" for="five-six"&gt;5:00 PM - 6:00 PM&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="form-check"&gt;
          &lt;input class="form-check-input" type="checkbox" value="6:00 PM - 7:00 PM" id="six-seven" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime"&gt;
          &lt;label class="form-check-label" for="six-seven"&gt;6:00 PM - 7:00 PM&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="form-check"&gt;
          &lt;input class="form-check-input" type="checkbox" value="7:00 PM - 8:00 PM" id="seven-eight" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime"&gt;
          &lt;label class="form-check-label" for="seven-eight"&gt;7:00 PM - 8:00 PM&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the JS:</p>
  
  <pre><code>$('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');
      }
  });
  </code></pre>
  
  <p>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 <strong>selectTime[]</strong> 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? </p>
  
  <p>Here is the updated code:</p>
  
  <pre><code>&lt;div id="selectSessionEvening" class="sessionEvening"&gt;
                        &lt;p style="font-weight:bold;"&gt;Evening Session&lt;/p&gt;
                        &lt;div class="form-check"&gt;
                          &lt;input class="form-check-input" type="checkbox" value="4:00 PM - 5:00 PM" id="four-five" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]"&gt;
                          &lt;label class="form-check-label" for="four-five"&gt;4:00 PM - 5:00 PM&lt;/label&gt;
                        &lt;/div&gt;
                        &lt;div class="form-check"&gt;
                          &lt;input class="form-check-input" type="checkbox" value="5:00 PM - 6:00 PM" id="five-six" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]"&gt;
                          &lt;label class="form-check-label" for="five-six"&gt;5:00 PM - 6:00 PM&lt;/label&gt;
                        &lt;/div&gt;
                        &lt;div class="form-check"&gt;
                          &lt;input class="form-check-input" type="checkbox" value="6:00 PM - 7:00 PM" id="six-seven" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]"&gt;
                          &lt;label class="form-check-label" for="six-seven"&gt;6:00 PM - 7:00 PM&lt;/label&gt;
                        &lt;/div&gt;
                        &lt;div class="form-check"&gt;
                          &lt;input class="form-check-input" type="checkbox" value="7:00 PM - 8:00 PM" id="seven-eight" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]"&gt;
                          &lt;label class="form-check-label" for="seven-eight"&gt;7:00 PM - 8:00 PM&lt;/label&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the working jsfiddle: <a href="https://jsfiddle.net/humanware/y1c330f8/4/" rel="nofollow noreferrer">https://jsfiddle.net/humanware/y1c330f8/4/</a></p>
  
  <p><strong>UPDATE:</strong>
  I tried doing this in JS:</p>
  
  <pre><code>$('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');
      }
  });
  </code></pre>
  
  <p>But Got This Error: 
  <a href="https://i.stack.imgur.com/0ovTC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0ovTC.jpg" alt="enter image description here"></a></p>