如果在下拉菜单中没有选择的值，则禁用按钮

Question

我有一个代码，它禁用页面加载时的按钮，因为下拉列表的值为空。但是，如果选择了一个值（这些值来自数据库，它已填充且正在工作），则该按钮仍处于禁用状态。

的Jquery：

<script> 
    $(document).ready(function(){ 
     $('.send').attr('disabled',true); 

     $('#kagawad').keyup(function(){ 
      if($(this).val() != ""){ 
       $('.send').attr('disabled', false); 
      } 
      else 
      { 
       $('.send').attr('disabled', true);   
      } 
     }) 
    }); 
</script> 

HTML：

<div class="item form-group"> 
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Select Kagawad</label> 
    <div class="col-md-9 col-sm-9 col-xs-12"> 
    <?php 
     include 'config.php'; 
     $selectSql = "SELECT firstName, middleName, lastName 
        FROM table_position p 
        LEFT JOIN person r ON p.Person_idPerson = r.idPerson 
        WHERE p.bar_position = 'Barangay Kagawad' AND p.activeOrInactive = 'Active'"; 
        $result = mysqli_query($conn, $selectSql); 
    ?> 

     <select class="form-control" id = "kagawad" name = "kagawad" required> 
      <option value="">Choose...</option> 
      <?php 
       while ($line = mysqli_fetch_array($result)) { 
      ?> 
      <option value="<?php echo $line['firstName'].' '.$line['middleName'].' '.$line['lastName'];?>"> <?php echo $line['firstName'].' '.$line['middleName'].' '.$line['lastName'];?> </option> 

      <?php 
       mysqli_close($conn); 
       } 
      ?> 
     </select> 
    </div> 
<button id="send" type="submit" class="send btn btn-success" name="addCedula">Save Record</button> 

我该怎么办呢？我需要修改我的代码？谢谢！

Answer 1

1. 使用change事件在<select>。
2. 而不是attr()，使用prop()来设置禁用状态。
3. 使用ID选择器来禁用按钮。

代码：

$('#kagawad').on('change', function() { 
    $('#send').prop('disabled', !$(this).val()); 
}).trigger('change');