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

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. 在<select>上使用change事件。
2. 代替attr() ，使用prop()设置禁用状态。
3. 使用ID选择器禁用按钮。

码：

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