Флажок установлен работает только один раз

Question

Форма отправки сообщения, клиент должен выбрать хотя бы один из вариантов (почта, SMS).

Кнопка отправки будет отключена, если ни один не выбран, и активирована, если один или оба выбраны

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

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

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

Answer 3

Исправьте свою логику.После отключения вы не включаете снова при проверке.

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

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

Answer 5

Вы никогда не включите кнопку снова. Есть только инструкция по отключению.

Я бы отключил его по умолчанию в начале, а затем включил бы его, если какой-либо из флажков установлен.

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