uncheck selected checkbox when one of the checkbox option has been selected

Question

I have 2 groups of checkbox options on same page. below is the code.

<div class="col-xs-12">
<label class="checkbox-inline"> 
<input type="checkbox" th:field="*{borrowerRace1}"  th:value="1"  th:text="borrower1" />
 </label>
 </div>
 <div class="col-xs-12">
 <label class="checkbox-inline"> 
 <input type="checkbox" th:field="*{borrowerRace1}"  th:value="2"  th:text="borrower2" />
  </label>
  </div>
  <div class="col-xs-12">
  <label class="checkbox-inline"> 
   <input type="checkbox" th:field="*{borrowerRace1}"  th:value="3"  th:text="borrower3" />
       </label>
   </div>
     <div class="col-xs-12">
        <label class="checkbox-inline"> 
          <input type="checkbox" th:field="*{borrowerRace1}"  th:value="4" th:text="borrower4" />
        </label>
        </div>


        <div class="col-xs-12">
              <label class="checkbox-inline"> 
  <input type="checkbox" th:field="*{borrowerEthnicity1}"  th:value="1" th:text="Ethnicity1" />
           </label>
        </div>
           <div class="col-xs-12">
         <label class="checkbox-inline"> 
         <input type="checkbox" th:field="*{borrowerEthnicity2}"  th:value="2" th:text="Ethnicity2" />
      </label>
          </div>
     <div class="col-xs-12">
      <label class="checkbox-inline"> 
 <input type="checkbox" th:field="*{borrowerEthnicity3}"  th:value="3"  th:text="Ethnicity3" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline"> 
 <input type="checkbox" th:field="*{borrowerEthnicity4}"  th:value="4" th:text="Ethnicity4" />
   </label>
    </div>

Now,

• User can select first 3 check boxes but clicking the 4th (last) one should select the 4th (last) one and deselect all other of the set. Same should happen for all checkbox sets.

• Example : User can select A,B,C checkbox at a same time but when he checks D all the above selected checkboxes should get unselected. Similarly for E,F,G and H. I hope I am clear now.

Please help me on this. I hope I am clear, if not please do let me know

Answer 1

The below code section should work according to your requirement

 $(document).ready(function() { $('.checkbox1').on('click', function() { var last_chekbox1 = $('.checkbox1:last'); if (last_chekbox1.is(':checked')) { $('.checkbox1').prop('checked', false); $(this).prop('checked', true); } }); $('.checkbox2').on('click', function(e) { var last_chekbox2 = $('.checkbox2:last'); if (last_chekbox2.is(':checked')) { $('.checkbox2').prop('checked', false); $(this).prop('checked', true); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="col-xs-12"> <label class="checkbox-inline"> <input type="checkbox" th:field="*{borrowerRace1}" th:value="1" th:text="borrower1" class="checkbox1" /> A </label> </div> <div class="col-xs-12"> <label class="checkbox-inline"> <input type="checkbox" th:field="*{borrowerRace1}" th:value="2" th:text="borrower2" class="checkbox1" /> B </label> </div> <div class="col-xs-12"> <label class="checkbox-inline"> <input type="checkbox" th:field="*{borrowerRace1}" th:value="3" th:text="borrower3" class="checkbox1" /> C </label> </div> <div class="col-xs-12"> <label class="checkbox-inline"> <input type="checkbox" th:field="*{borrowerRace1}" th:value="4" th:text="borrower4" class="checkbox1" /> D </label> </div> <hr> <div class="col-xs-12"> <label class="checkbox-inline"> <input type="checkbox" th:field="*{borrowerEthnicity1}" th:value="1" th:text="Ethnicity1" class="checkbox2" /> E </label> </div> <div class="col-xs-12"> <label class="checkbox-inline"> <input type="checkbox" th:field="*{borrowerEthnicity2}" th:value="2" th:text="Ethnicity2" class="checkbox2" /> F </label> </div> <div class="col-xs-12"> <label class="checkbox-inline"> <input type="checkbox" th:field="*{borrowerEthnicity3}" th:value="3" th:text="Ethnicity3" class="checkbox2" /> G </label> </div> <div class="col-xs-12"> <label class="checkbox-inline"> <input type="checkbox" th:field="*{borrowerEthnicity4}" th:value="4" th:text="Ethnicity4" class="checkbox2" /> H </label> </div> 

Answer 2

$('checkbox1').on('click'function(){
$('checkbox').attr('checked',false)
$(this).attr('checked',true)
})

try something like this