javascript - 如果下拉列表中没有选定值，则禁用按钮

Question

我有一个代码，它在页面加载时禁用按钮，因为下拉列表的值为空。 However, when a value is selected (the values are from the database, it is populated and it is working), the button is still disabled.

J查询:

<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');