单击一个复选框时如何禁用特定复选框？ JavaScript

Question

我想在单击复选框时禁用某些复选框。这是我想要实现的目标：

如果点击更换注册，禁用荣誉解雇和入学考试

如果点击了良好的道德证书，则禁用 Entrace Exam

如果荣誉解雇，禁用文凭、CUE 请求、CMI 请求、入学考试

如果点击记录的成绩单，请禁用 CUE 请求、CMI 请求、入学考试

如果是入学考试，全部禁用

    <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

您可以这样做的一种方法是，因为您已经知道在单击某些复选框时要禁用哪些复选框， 给复选框一个 data-disable 属性和值作为你要禁用的复选框，

看这个例子..只需单击第一个复选框即可尝试

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>

值是 Id（我给了其他复选框）

<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>

然后你只需要这个通用函数来禁用复选框

$("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);
    });
}
});

希望对你有帮助

Answer 2

您的点击事件需要在 DOM 准备就绪后进行注册。

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

当您在 jQuery 文档中更新时，我已经测试了您的代码，它工作正常（除了缺少几个大括号和右括号）。

$(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 3

首先修复您的 html 结构，这样您就不会有多余的标签挂在我们的未关闭或未打开的标签上

以下是解决方案。你错过了大量的右括号和右括号

最后，jQuery 只有一个 click 方法而不是 onClick 方法...通过一个简单的网站运行您的代码以验证您的 HTML，因为您似乎仍在学习这里是 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>