Блог

Главная - Вопросы по программированию - включить кнопку при изменении любого из полей выбора

включить кнопку при изменении любого из полей выбора

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть 12 полей выбора и одна кнопка отправки в форме. изначально кнопка отправки отключена. когда когда-либо пользователь менял хотя бы одно значение поля выбора, кнопка отправки должна включаться. я попытался использовать событие onchagne. но это сбой. добавлен код ниже

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: select</h2>
  <p>The form below contains two dropdown menus (select lists):</p>
  <form>
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="form-control" id="sel1">
        <option value="0">choose</option>
      
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br/>
      <select class="form-control" id="sel12">
        <option value="0">choose</option>
      
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
       <br/>
      <select class="form-control" id="sel13">
      <option value="0">choose</option>
      
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
 
  <br/>
      <select class="form-control" id="sel14">
      <option value="0">choose</option>
      
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
  <br/>
      <select class="form-control" id="sel15">
      <option value="0">choose</option>
      
       <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
 
  <br/>
      <select class="form-control" id="sel16">
      <option value="0">choose</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
 
 
 
      <br>
      </div>
        <button type="submit" id="main" class="btn disabled btn-primary btn-default">Submit</button>

  </form>
</div>
<script>

$('select').change(function () {
    selectedOption = $('select').val();
    if(selectedOption!="0"){
        $('#main').removeClass("disabled");
    }
    else{
        $('#main').addClass("disabled");
    }
});
</script>
</body>
</html>

Ответ №1:

сначала проверьте все значения выбора при изменении любого ввода выбора

 $('select').change(function () {

    let selectedOption = 0;
    //check all the select values first 
    $('select').each((i,elm)=>{
        if($(elm).val()!=0)
            selectedOption = $(elm).val();
    })
    
   
    if(selectedOption!="0"){
        $('#main').removeClass("disabled");
    }
    else{
        $('#main').addClass("disabled");
    }
});