mardi 12 septembre 2017

How to disable specific checkboxes when one checkbox is clicked? JavaScript

    I wanna disable some checkboxes when a checkbox is clickd. Here is what I wanna to achieve:

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

    <td><input type = "checkbox"name = "ac_description[]" value = "Replacement_of_Registration" ><b>Replacement of Registration</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;" ></center>
        </tr>
        <tr>
            <td><input type = "checkbox"name = "ac_description[]" value = "Good_Moral_Certificate" ><b>Good Moral Certificate</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;" ></center>
        </tr>
        </tr>
            <tr>
            <td><input type = "checkbox" name = "ac_description[]" value = "Honorable_Dismissal " ><b>Honorable Dismissal</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;" ></center>
        </tr>
        </tr>
            <tr>
            <td><input type = "checkbox" name = "ac_description[]" value = "Transcript_of_Record"><b>Transcript of Record</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;"></center>
        </tr>
        <tr>
            <td><input type = "checkbox" name = "ac_description[]" value = "Diploma"><b>Diploma</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;"></center>
        </tr>
        <tr>
            <td><input type = "checkbox" name = "ac_description[]" value = "CUE_Request"><b>CUE Request</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;"></center>
        </tr>
        <tr>
            <td><input type = "checkbox" name = "ac_description[]" value = "CMI_Request"><b>CMI Request</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;"></center>
        </tr>
        <tr>
            <td><input type = "checkbox"  name = "ac_description[]" value = "Entrance_Exam"><b>Entrance Exam</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;"></center>
        </tr>
        <tr>
            <td><input type = "checkbox" name = "ac_description[]" value = "School_fees-Medical/Dental_Laboratory "><b>School fees-Medical/Dental Laboratory</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;"></center>
        </tr>
        <tr>
            <td><input type = "checkbox" name = "ac_description[]" value = "School_fees-Transcript/Honorable"><b>School fees-Transcript/Honorable</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;"></center>
        </tr>
        <tr>
            <td><input type = "checkbox" name = "ac_description[]" value = "School_fees-Library"><b>School fees-Library</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;"></center>
        </tr>
        <tr>
            <td><input type = "checkbox" name = "ac_description[]" value = "Affiliation_Fees"><b>Affiliation Fees</b>
            <td><center><input type="number" name="quantity[]" style="width:60px;"></center>
        </tr>

<script language = "JavaScript">
$("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;
});

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




Aucun commentaire:

Enregistrer un commentaire