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

Question

我想在单击复选框时禁用一些复选框。以下是我想要实现的内容：

- 如果点击注册替换，则禁用荣誉开除和入学考试。 - 如果点击优良品德证书，则禁用入学考试。 - 如果点击荣誉开除，则禁用文凭、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>

- Joana Clariz Jacinto

---

$this.onClick( function(){}) 中存在一些错误，$this 是什么，它是否具有 onclick 函数？ - JiangangXiong

@cale_b 这不是英语堆栈，'wanna' 是一种广泛接受和理解的俚语，这几乎使它成为一个词。 - A. L

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

希望这可以帮到你。

- Sameer

---

优秀的建议！ - random_user_name

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

- Phani Kumar M

---

只是为了澄清一下：$(function(){ ... }); 处理的是 DOM 就绪事件，而不是 onLoad 事件，它们是两个不同的事件。 - Reflective

Answer 3

首先，修复您的HTML结构，以便您不会有额外的标签挂起，这些标签没有被关闭或未打开。

以下是解决方案。您缺少了大量的闭合括号和闭合括号。

最后，jQuery只有一个click方法，而没有onClick方法...将您的代码通过一个简单的网站运行，以验证您的HTML，因为似乎您仍在学习这里是官方W3C标准，它将进行验证。

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

- Andrei

---

嗯，正如名字和图片所示，Joan是一位女士，所以我认为“太多错误了该死的男人”不太合适 ;) - Reflective

@Reflective 没错，直到读完之后才意识到，"man"也可以指一个人 4a - Andrei

我说“proper” - 请在字典中查看它 ;) - Reflective

@cale_b 以后我会克制自己，不再这样做。 - Andrei