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

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