Question

我有一个函数来处理下拉列表中的更改：

 $('#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>

问题说明：

当我上面的下拉列表发生变化时，我需要显示这些复选框。

现在。您选择一个复选框，在字段中输入一个值并单击保存，复选框将消失。这也完成了。

现在，您从下拉列表中选择其他内容，复选框重新出现，并且必须取消选中。这就是我的问题所在。如果您选择了，说第二个复选框并保存了值，当下拉列表发生变化时，我仍然会选中第二个复选框并隐藏所有其他复选框，并禁用相应的字段！

Answer 1

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

        });

Answer 2

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

""+new Date().getTime()

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

如何在下拉菜单中取消选中属于同一班级的所有复选框？

2 个答案: