时间戳

首页 > 解决方案 > 更改任何选择框时启用按钮

javascript - 更改任何选择框时启用按钮

问题描述

我在一个表单中有 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>

标签： javascriptjquery

解决方案

在更改任何选择输入时首先检查所有选择值

$('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");
    }
});

推荐阅读