javascript 单击另一个复选框时取消选中这些复选框

jhiyze9q 于 2023-04-04 发布在 Java

关注(0)|答案(2)|浏览(174)

我有一个复选框，当点击时，会导致整个复选框部分被禁用，并且该部分中的任何复选框都将被取消选中。这是我的复选框代码：

<input class="form-check-input" id="notInterest" type="checkbox" onclick="NoInterest(this)"> Not Interested

如果上面的复选框被选中，那么我希望整个复选框部分被禁用和取消选中。

<input class="form-check-input" type="checkbox" onclick="NoInterest(this)"> Not Intereted

    <div class="form-group row" id="reassignChecks">
      
        @for (var i = 1; i <= 10; i++)
        {
         
            <input name="AreChecked" type="checkbox" value="@i" /> @i

              

        }
    </div>

这是在单击“Not Interested”复选框时禁用复选框部分的代码。禁用复选框工作正常，但取消复选框不起作用。下面是jQuery代码：

<script>
     function NoInterest(cb) {
            if (cb.checked == true) {
                $('#reassignChecks').addClass('disableSection');
                $('#reassignChecks').attr('checked', false);
                
            } else {
                $('#reassignChecks').removeClass('disableSection');
               
                $('#reassignChecks').attr('checked', true);
               
            }
        }

 </script>

下面是网页的屏幕截图：

在上面的屏幕截图中，单击“Not Interested”复选框时，我希望div标记中ID为“reassignChecks”的所有复选框都被禁用和取消选中。

JavaScript

来源：https://stackoverflow.com/questions/75909796/uncheck-the-checkboxes-on-a-click-of-another-checkbox

2条答案

按热度按时间

xfb7svmp1#

$('#reassignChecks').attr('checked', false);不会影响复选框，因为#reassignChecks是<div>。
相反，您希望选择所有作为#reassignChecks子元素的input[type="checkbox"]元素，并根据.form-check-input的选中/未选中状态设置其disabled属性，并将其:checked属性设置为false。

$('#notInterest').on('change', function () {
  const isChecked = $(this).is(':checked');
  
  $('#reassignChecks').toggleClass('disableSection', isChecked);
  
  $('#reassignChecks input[type="checkbox"]')
    .attr('disabled', isChecked)
    .prop('checked', false)
  ;
});

.disableSection {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-check-input" id="notInterest" type="checkbox"> Not Intereted

<div class="form-group row" id="reassignChecks">
  <input name="AreChecked" type="checkbox" value="0" /> 0
  <input name="AreChecked" type="checkbox" value="1" /> 1
  <input name="AreChecked" type="checkbox" value="2" /> 2
  <input name="AreChecked" type="checkbox" value="3" /> 3
  <input name="AreChecked" type="checkbox" value="4" /> 4
  <input name="AreChecked" type="checkbox" value="5" /> 5
  <input name="AreChecked" type="checkbox" value="6" /> 6
</div>

赞(0）回复(0）举报 2023-04-04

wfauudbj2#

有两件事要说=〉
1-你可以通过class-name =〉检查是否有检查过的输入

$(".class-name:checked").length

2-检测输入是否被选中=〉

$(".class-name").is(":checked")

3-最后看下面的代码段=〉
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 单击另一个复选框时取消选中这些复选框

2条答案

相关问题

热门标签

最新问答