How to disable other checkboxes on click of one check box?

1.6k views Asked by At

How can I do this?

  • If Replacement of Registration is clicked, disable Honorable Dismissal and Entrance Exam
  • If Good Moral Certificate is clicked, disable Entrace Exam
  • If Honorable Dismissal, disable Diploma, CUE Request, CMI Request, Entrance Exam
  • If Transcript of Record is clicked, disable CUE Request, CMI Request, Entrance Exam
  • If Entrance Exam, disable all

<input type="checkbox" name="ac_description[]" value="Replacement_of_Registration">
<input type="checkbox" name="ac_description[]" value="Good_Moral_Certificate">
<input type="checkbox" name="ac_description[]" value="Honorable_Dismissal " >
<input type="checkbox" name="ac_description[]" value="Transcript_of_Record">
<input type="checkbox" name="ac_description[]" value="Diploma">
<input type="checkbox" name="ac_description[]" value="CUE_Request">
<input type="checkbox" name="ac_description[]" value="CMI_Request">
<input type="checkbox" name="ac_description[]" value="Entrance_Exam">
<input type="checkbox" name="ac_description[]" value="School_fees-Medical/Dental_Laboratory">
<input type="checkbox" name="ac_description[]" value="School_fees-Transcript/Honorable">
<input type="checkbox" name="ac_description[]" value="School_fees-Library">
<input type="checkbox" name="ac_description[]" value="Affiliation_Fees">
2

There are 2 answers

1
KingLagalot On

You will put disabled at the end of the input tag for example:

<input type = "checkbox"name = "ac_description[]" value = "Good_Moral_Certificate" >
<input type = "checkbox" name = "ac_description[]" value = "Honorable_Dismissal " >
<input type = "checkbox" name = "ac_description[]" value = "Transcript_of_Record">
<input type = "checkbox" name = "ac_description[]" value = "Diploma" disabled>

The fourth checkbox will be disabled. You can manipulate it using jQuery. Using jQuery you could have an event happen when a checkbox is triggered it applies the disabled attribute to the other boxes. Take a look at this answer: Disable/enable an input with jQuery?

If you want to disable a group, assign a class to each group of inputs then use jQuery to change them. Take a look at this post as well: Catch checked change event of a checkbox

Here is an example of what you might want to try:

$('.class_name').each( function(){
$this.onClick( function(){
if( $(this).is(':checked') ){
    $('.class_name').each( function(){
    if( $(this).not(':checked') ){
        $(this).prop('disabled', true);
    }
  })
}

}) });

1
Dan Philip Bejoy On

Pieced this code snippet from whats understood from your question,

$("input[type='checkbox']").click(function(){
  var val = $(this).attr('value');
  switch(val) {
    case 'Replacement_of_Registration':
    if($(this).is(':checked'))
      $("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled',true);
    else
      $("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled',false);
  break;
  case 'Good_Moral_Certificate':
    if($(this).is(':checked'))
      $("input[value='Entrance_Exam']").prop('disabled',true);
    else
      $("input[value='Entrance_Exam']").prop('disabled',false);
  break;
  case 'Honorable_Dismissal ':
    if($(this).is(':checked'))
      $("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',true);
    else
      $("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',false);
  break;
  case 'Transcript_of_Record':
    if($(this).is(':checked'))
      $("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',true);
    else
      $("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',false);
  break;
  case 'Entrance_Exam':
    if($(this).is(':checked'))
      $("input[name='ac_description[]']").not(this).prop('disabled',true);
    else
      $("input[name='ac_description[]']").not(this).prop('disabled',false);
  break;
});