Блог

Главная - Вопросы по программированию - Jquery как отключить кнопку отправки, пока не будут установлены переключатель и флажок

Jquery как отключить кнопку отправки, пока не будут установлены переключатель и флажок

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть кнопка отправки, которая по умолчанию отключена. Теперь у меня есть две переключающие кнопки и флажок, и кнопка отправки может быть включена только тогда, когда один из переключателей установлен и флажок установлен.

Прямо сейчас я могу просто установить флажок, и кнопка отправки включена.

 <div>
  <label for="check1">
     <input type="radio" name="radio" id="check1">Value 1
  </label>

  <label for="check2">
     <input type="radio" name="radio" id="check2">Value 2
  </label>
</div>

<div id="terms">
   <input type="checkbox" name="test" value="1">Check
 </div>

<div>
  <button type="submit" id="btn">Send</button>
</div>

и JS:

 $('button[type="submit"]').prop("disabled", true);

$('input[name="test"]').on("click", function() {
  $(' button[type="submit"]').prop("disabled", !$('input[name="test"]').prop("checked"));
});

Я сделал для этого jsfiddle.

Итак, как я могу этого добиться?

Ответ №1:

Вы можете проверить длину отмеченного переключателя:

 $('button[type="submit"]').prop("disabled", true);

$('input[name="test"], input[name="radio"]').on("click", function() {
  if($('input[name="radio"]:checked').length){
    $(' button[type="submit"]').prop("disabled", !$('input[name="test"]').prop("checked"));
  }
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="check1">
     <input type="radio" name="radio" id="check1">Value 1
  </label>

  <label for="check2">
     <input type="radio" name="radio" id="check2">Value 2
  </label>
</div>

<div id="terms">
   <input type="checkbox" name="test" value="1">Check
 </div>

<div>
  <button type="submit" id="btn">Send</button>
</div>

Ответ №2:

Создайте одну общую функцию для проверки всех флажков и переключателей.

Проверьте приведенный ниже пример.

 $('button[type="submit"]').prop("disabled", true);

$('#check1, #check2, input[name="test"]').on("change", function() {
  validate();
});

function validate() {
   var valid = true;
   
   if(!$('[name="radio"]:checked').val()) {
      valid = false;
   }
   if(!$('[name="test"]').prop('checked')) {
      valid = false;
   }
   $('button[type="submit"]').prop("disabled", !valid)
}  
 #terms {
  margin-top: 15px;
}

#btn {
  margin-top: 15px;
  background: red;
  padding: 5px;
  border: 0;
}

#btn::disabled {
  background: lightgrey;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="check1">
    <input type="radio" name="radio" id="check1" value="1">Value 1
  </label>
  
    <label for="check2">
    <input type="radio" name="radio" id="check2" value="2">Value 2
  </label>
</div>

<div id="terms">
  <input type="checkbox" name="test" value="1">Check
</div>

<div>
  <button type="submit" id="btn">Send</button>
</div>

Ответ №3:

Добавьте onclick для них обоих и оператор and if внутри :

 $('button[type="submit"]').prop("disabled", true);

$('input[name="test"], input[name=radio]').on("click", function() {
  if ($('input[name=radio]:checked').length > 0) {
    $('button[type="submit"]').prop(
      "disabled", !$('input[name="test"]').prop("checked")
    );
  }
});  
 #terms {
  margin-top: 15px;
}

#btn {
  margin-top: 15px;
  background: red;
  padding: 5px;
  border: 0;
}

#btn::disabled {
  background: lightgrey;
}  
 <div>
  <label for="check1">
    <input type="radio" name="radio" id="check1">Value 1
  </label>

  <label for="check2">
    <input type="radio" name="radio" id="check2">Value 2
  </label>
</div>

<div id="terms">
  <input type="checkbox" name="test" value="1">Check
</div>

<div>
  <button type="submit" id="btn">Send</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

https://jsfiddle.net/wxq0Lr5n/

Комментарии:

1. > 0 — проверка здесь на самом деле не нужна!