如果下拉列表中没有选定值,则禁用按钮
Disable button if no selected value in dropdown
我有一个代码,它在页面加载时禁用按钮,因为下拉列表的值为空。 However, when a value is selected (the values are from the database, it is populated and it is working), the button is still disabled.
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>
我该怎么做?我需要修改我的代码什么?谢谢!
- 在
<select>
上使用 change
事件。
- 而不是
attr()
,使用prop()
设置禁用状态。
- 使用 ID 选择器,禁用按钮。
代码:
$('#kagawad').on('change', function () {
$('#send').prop('disabled', !$(this).val());
}).trigger('change');
我有一个代码,它在页面加载时禁用按钮,因为下拉列表的值为空。 However, when a value is selected (the values are from the database, it is populated and it is working), the button is still disabled.
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>
我该怎么做?我需要修改我的代码什么?谢谢!
- 在
<select>
上使用change
事件。 - 而不是
attr()
,使用prop()
设置禁用状态。 - 使用 ID 选择器,禁用按钮。
代码:
$('#kagawad').on('change', function () {
$('#send').prop('disabled', !$(this).val());
}).trigger('change');