Это мой код Здесь я дал одинаковое имя класса для обоих флажок ввода

$(document).ready(function() {
  $(document).on('change', ".check_class", function() {
    $(".check_class").attr("checked", false); //uncheck all checkboxes
    $(this).attr("checked", true); //check the clicked one
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row  m-t-10 m-l-5">
  <div class="form-group row">
    <div class="col-sm-4">
      <label class="checkbox-inline">  
        <input type="checkbox" class="check_class"  value="is_email" name="is_email">
        Email send?
      </label>
    </div>
    <div class="col-sm-4">
      <label class="checkbox-inline"> 
        <input type="checkbox" class="check_class"  value="is_sms" name="is_sms">
        Sms send?
      </label>
    </div>
  </div>
</div>

Я много пробовал, но все равно не работает. Любые ошибки. Спасибо.

0
sradha 31 Авг 2017 в 13:22

4 ответа

Лучший ответ

Ваш код будет работать нормально, если вы будете использовать prop() вместо attr() , как показано ниже : -

$(document).ready(function() {
  $(document).on('change', ".check_class", function () {
    $(".check_class").prop("checked", false);
    $(this).prop("checked", true);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row  m-t-10 m-l-5">
    <div class="form-group row">
        <div class="col-sm-4">
        <label class="checkbox-inline">  <input type="checkbox" class="check_class"  value="is_email" name="is_email">Email send?</label>
    </div>
    <div class="col-sm-4">
        <label class="checkbox-inline"> <input type="checkbox" class="check_class"  value="is_sms" name="is_sms">Sms send?</label> 
    </div>
    </div>
</div>

Примечание: - Вы можете перейти к переключателю, потому что он установлен по умолчанию.

Ссылка: - почему .attr () не работает, но .prop () работает

1
Anant Singh---Alive to Die 31 Авг 2017 в 11:22

Вы можете использовать not(this), чтобы снять все остальные флажки.

$(document).ready(function() {
  $(document).on('change', ".check_class", function() {
    $(".check_class").not(this).prop('checked', false); 
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row  m-t-10 m-l-5">
  <div class="form-group row">
    <div class="col-sm-4">
      <label class="checkbox-inline">  <input type="checkbox" class="check_class"  value="is_email" name="is_email">Email send?</label>
    </div>
    <div class="col-sm-4">
      <label class="checkbox-inline"> <input type="checkbox" class="check_class"  value="is_sms" name="is_sms">Sms send?</label>
    </div>
  </div>
</div>
0
Kiran Dash 31 Авг 2017 в 10:30

Если только один из этих флажков должен быть установлен за один раз, просто используйте переключатель. Это именно то, для чего они были разработаны, и это избавляет от необходимости в любом коде JS вообще:

<div class="row  m-t-10 m-l-5">
  <div class="form-group row">
    <div class="col-sm-4">
      <label class="checkbox-inline">  
        <input type="radio" class="check_class" value="is_email" name="send">
        Email send?
      </label>
    </div>
    <div class="col-sm-4">
      <label class="checkbox-inline"> 
        <input type="radio" class="check_class" value="is_sms" name="send">
        Sms send?
      </label>
    </div>
  </div>
</div>
1
Rory McCrossan 31 Авг 2017 в 10:29
$(document).on('change', ".check_class", function () {
         $(".check_class").each(function(index,element){
                  element.attr("checked", false);
         }); //uncheck all check-boxes

});
1
Anant Singh---Alive to Die 31 Авг 2017 в 11:22