如何在下拉菜单中更改时取消选中属于同一类的所有复选框

How to uncheck all checkboxes belonging to the same class on change in a drop down?

本文关键字：一类 复选框 属于 下拉菜单 取消      更新时间：2023-09-26

我有一个函数来处理下拉列表中的变化:

 $('#dropDownChoice').change(function () {
     debugger;
     var choice= $('#dropDownChoice option:selected').text();
     //code to display elements: the divisions that contain the checkboxes
     });

$(".chkBox").change(function () {
            debugger;
            if (this.checked) {
                $("." + this.className).not(this).prop("disabled", true);
                $(this).closest('div').find(".save").show();
                $(this).closest('div').find(':input[type="number"]').prop('disabled', false);
            }
            else {
                //opposite of that in if - block
            }
        });

复选框(6个)声明为:

<input type="checkbox" class="chkBox" >

现在，当我选中一个复选框时，所有相关的字段都会显示出来，而其他的则被禁用。

我的问题是，当下拉改变，即另一个选项被选中时，我仍然得到之前选择的复选框以及相关字段启用，所有其他复选框不可见。

我试着使用:

$('.chkBox').show();
$('.chkBox').removeAttr('checked');

还有一个自定义函数，我从$('#dropDownChoice').change(function (){}内部调用但是这行不通。

function ResetChkBox() {
                $('.chkBox').prop('checked', false);
                $(this).closest('div').find(".save").hide();
}
编辑:

HTML: 

<div id= "main">
    <div id="div1" style="padding-left: 20px;">
            <input type="checkbox" class="chkBox" >
            <input type="number" id="len1" disabled = "disabled"/>
            <a href='#' id="btn-save" class="glyphicon glyphicon-floppy-save save" style="display: none;" ></a>
    </div>
   //other divs each with numeric input fields and a checkbox, all checkboxes of class `chkBox`
</div>

问题说明:

我需要在它上面的下拉框发生变化时显示这些复选框，我已经实现了这一点。

。选择一个复选框，在字段中输入一个值，然后单击保存，复选框就会消失。这件事也完成了。

现在，您从下拉列表中选择其他内容，复选框重新出现，并且必须未选中。这就是我的问题所在。如果您选择了第二个复选框并保存了该值，那么当下拉框更改时，我仍然会选中第二个复选框，并隐藏所有其他复选框，并禁用其对应的字段!

$(".chkBox").change(function () {
            debugger;
            if (this.checked) {
                 $(".chkBox").prop("checked", false);
                $(".chkBox").prop("disabled", true);
                $(this).prop("disabled",false);
                $(this).prop("checked",true);
                $(this).closest('div').find(".save").show();
                $(this).closest('div').find(':input[type="number"]').prop('disabled', false);
            }
            else {
                //opposite of that in if - block
            }
        });

我不确定这是否是你需要的。

$(".chkBox").change(function () {
            $("." + this.className).not(this).prop("disabled", $(this).is(':checked'));
            $(this).closest('div').find(':input[type="number"]').prop('disabled', !$(this).is(':checked'));
            $(".save").hide();
            $(this).closest('div').find(".save").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id= "main">
    <div id="div1" style="padding-left: 20px;">
            <input type="checkbox" class="chkBox" >
            <input type="number" id="len1" disabled = "disabled"/>
            <a href='#' id="btn-save" class="glyphicon glyphicon-floppy-save save" style="display: none;" >div1</a>
    </div>
     <div id="div2" style="padding-left: 20px;">
            <input type="checkbox" class="chkBox" >
            <input type="number" id="len2" disabled = "disabled"/>
            <a href='#' id="btn-save2" class="glyphicon glyphicon-floppy-save save" style="display: none;" >div2</a>
    </div>
     <div id="div3" style="padding-left: 20px;">
            <input type="checkbox" class="chkBox" >
            <input type="number" id="len3" disabled = "disabled"/>
            <a href='#' id="btn-save3" class="glyphicon glyphicon-floppy-save save" style="display: none;" >div3</a>
    </div>
  
</div>

相关文章：