复选框检查只工作一次答案

【问题标题】：Checkbox checked works only once复选框检查只工作一次
【发布时间】：2019-05-23 11:00:22
【问题描述】：

消息发送形式，客户必须选择至少一种备选方案（邮件、短信）。

如果没有选择发送按钮将被禁用，如果选择一个或两个则激活

$(document).ready(function() {
  $('.form-check-input').change(function() {
    $(this).each(function() {
      if (!$(this).is(':checked')) {
        $("#send").attr("disabled", "disabled");
      }
    });
  });
});

<div>
  <div class="row">
    <div class="col-md-12 form-check">
      <div>
        <input class="form-check-input" type="checkbox" value="" id="Epost" checked>
        <label class="form-check-label" for="E-post">E-post</label>
      </div>
      <div>
        <input class="form-check-input" type="checkbox" value="" id="SMS">
        <label class="form-check-label" for="SMS">SMS</label>
      </div>
      <br>
      <button id='send'>Send</button>
    </div>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

问题是因为您当前的逻辑不处理重新选中的复选框。

您可以通过反转逻辑来解决问题，以便disabled 属性在每次复选框更改时更新，并由复选框的length 确定：

var $checkboxes = $('.form-check-input').change(function() {
  $('#send').prop('disabled', function() {
    return $checkboxes.filter(':checked').length == 0;
  });
});

<div>
  <div class="row">
    <div class="col-md-12 form-check">
      <div>
        <input class="form-check-input" type="checkbox" value="" id="Epost" checked>
        <label class="form-check-label" for="E-post">E-post</label>
      </div>
      <div>
        <input class="form-check-input" type="checkbox" value="" id="SMS">
        <label class="form-check-label" for="SMS">SMS</label>
      </div>
      <br>
      <button id='send'>Send</button>
    </div>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

【解决方案2】：

你可以这样做：

$('.form-check-input').change(function() {
  $("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});

如果没有选中任何复选框，这将禁用按钮。

演示

$(document).ready(function() {
  $('.form-check-input').change(function() {
    $("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="row">
    <div class="col-md-12 form-check">
      <div>
        <input class="form-check-input" type="checkbox" value="" id="Epost" checked>
        <label class="form-check-label" for="E-post">
                        E-post
                    </label>
      </div>
      <div>
        <input class="form-check-input" type="checkbox" value="" id="SMS">
        <label class="form-check-label" for="SMS">
                        SMS
                    </label>
      </div>
      <br>
      <button id='send'>Send</button>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

您再也不会启用该按钮。只有一个禁用指令。

我会在开始时默认禁用它，然后在选中任何复选框时启用它。

$(document).ready(function() {
  $('.form-check-input').change(function() {
    $("#send").attr("disabled", "disabled");
    $(this).each(function() {
      if ($(this).is(':checked')) {
        $("#send").removeAttr("disabled");
      }
    });
  });
});

<div>
  <div class="row">
    <div class="col-md-12 form-check">
      <div>
        <input class="form-check-input" type="checkbox" value="" id="Epost" checked>
        <label class="form-check-label" for="E-post">E-post</label>
      </div>
      <div>
        <input class="form-check-input" type="checkbox" value="" id="SMS">
        <label class="form-check-label" for="SMS">SMS</label>
      </div>
      <br>
      <button id='send'>Send</button>
    </div>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

【解决方案4】：

$(document).ready(function() {
  $('.form-check-input').change(function() {
    let hasChecked = false;
    $('.form-check-input').each(function() {
      if ($(this).is(':checked')) {
        hasChecked = true;
      }
    });
    $("#send").attr("disabled", !hasChecked);
  });
});

<div>
  <div class="row">
    <div class="col-md-12 form-check">
      <div>
        <input class="form-check-input" type="checkbox" value="" id="Epost" checked>
        <label class="form-check-label" for="E-post">E-post</label>
      </div>
      <div>
        <input class="form-check-input" type="checkbox" value="" id="SMS">
        <label class="form-check-label" for="SMS">SMS</label>
      </div>
      <br>
      <button id='send'>Send</button>
    </div>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

请花时间描述问题是什么以及为什么这个解决方案有帮助。请记住，我们在这里是为了教育人们，而不仅仅是为他们编写代码。

【解决方案5】：

纠正你的逻辑。禁用后，您不会在选中时再次启用。

$(document).ready(function() {
  $('.form-check-input').change(function() {
    $(this).each(function() {
      if (!$(this).is(':checked')) {
        $("#send").attr("disabled", true);
      }else{
        $("#send").attr("disabled", false);
      }
    });
  });
});

Blockquote

【讨论】：