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

Question

I want to disable some checkboxes when a checkbox is clicked. Here is what I want 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>

Answer 1

Your click events needs to be registered once the DOM is ready.

$(document).ready(function () {
 //Your JS goes here.
});

I have tested your code when updated inside jQuery document ready, and it works fine (except for few curly braces and closing brackets missing).

$(document).ready(function () {
    $("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.on('click', function () {
            if ($(this).is(':checked')) {
                $('.class_name').each(function () {
                    if ($(this).not(':checked')) {
                        $(this).prop('disabled', true);
                    }
                })
            }
        });
    });
});

Answer 2

firstly fix up your html structure so you don't have extra tags hanging our that are not being closed or left unopened

below is the solution. you were missing a ton of closing brackets and closing parenthesis

lastly jQuery only has a click method not an onClick method... run your code through a simple website to validate your HTML as it seems your still learning here is the official W3C standard that it will validate

<!DOCTYPE html>
<html>

<head>
    <title>checkbox removal</title>
</head>

<body>
    <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 src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
            <script type="text/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;
                        default:
                            break;
                    }
                });

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

</html>

Answer 3

One way you can do it is, because you already know which checkboxes to disable when certain is clicked, give the checkboxes a data-disable attribute and the value as the checkboxes you want to disable,

Look at this example.. just click the first checkbox to try

https://jsfiddle.net/xw23ks5n/1/

<input type="checkbox" name="ac_description[]" data-disable="Honorable_Dismissal,Entrance_Exam" value="Replacement_of_Registration"><b>Replacement of Registration</b>

The value is the Id (which I gave to the other checkboxes)

<input type="checkbox" name="ac_description[]" value="Honorable_Dismissal" id="Honorable_Dismissal">
<input type="checkbox" name="ac_description[]" value="Entrance_Exam" id="Entrance_Exam"><b>Entrance Exam</b>

and then you just need this generic function to disable the checkboxes

$("input[type='checkbox']").click(function(){
$("input[type='checkbox']").each(function(){
    $(this).prop('disabled',false);
    });
if($(this).is(":checked")){

    var checkboxesToDisableList = $(this).data('disable').split(',');  
    $.each(checkboxesToDisableList, function() { 
    var id = "#"+this;
      $(id).prop('disabled',true);
    });
}
});

Hope this helps