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>

There are some errors in $this.onClick( function(){}), what's the $this and does it has the onclick function.? — JiangangXiong
– JiangangXiong, Commented Sep 13, 2017 at 2:37
@cale_b This isn't english stack, 'wanna' is a widely accepted and understood slang, which pretty much makes it a word. — A. L
– A. L, Commented Sep 13, 2017 at 3:14

Sameer · Accepted Answer · 2017-09-13 03:02:06Z

1

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

edited Sep 13, 2017 at 3:02

answered Sep 13, 2017 at 2:56

Sameer

3831 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

random_user_name Over a year ago

Excellent advise!

Phani Kumar M · Accepted Answer · 2017-09-13 03:01:28Z

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);
                    }
                })
            }
        });
    });
});

Jutt to make something clear: $(function(){ ... }); handles on DOM ready, not onLoad which is a different event.

random_user_name · Accepted Answer · 2017-09-13 14:14:03Z

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>

Well, Joan as the name and picture show ... is a woman so 'soo many errors damn man' is not proper I think ;)
@Reflective fair enough, didn't realized till after reading it through but man does refer to a person as well 4a

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related