我正在嘗試根據下拉串列中的選擇值以及textarea 不為空時禁用按鈕元素。所以當用戶從下拉串列中選擇 Reject 時,他們還必須填寫 textarea 輸入,否則他們無法更新(按鈕是禁用而不是隱藏)。
但是我無法完全實作它,我只在下拉條件下成功(也在隱藏狀態,而不是禁用)。這就是我所擁有的:
(如果有人可以用純 javascript 而不是 jquery 對此進行編碼,那可能會很好,謝謝)
$(document).ready(function(){
$(".input-wrap > select").on("change", function() {
if ( this.value == "Reject")
{
$("button").hide();
}
else
{
$("button").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-wrap">
<select class="select-class" id="selectId">
<option value="Reject">Reject</option>
<option value="Earn">Earn</option>
</select>
</div>
<div class="input-wrap">
<textarea class="textarea-class"></textarea>
</div>
<button type="button" class="button-class">Update</button>
uj5u.com熱心網友回復:
您可以使用禁用按鈕
$("button").prop('disabled', true);
并檢查文本欄位為空或不使用
if($("#textid").val().trim()!="")
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".input-wrap > select").on("change", function () {
if (this.value == "Reject") {
$("button").prop('disabled', true);
}
else {
$("button").show();
$("button").prop('disabled', false);
}
});
$("#textid").on('keyup', function () {
if ($("#textid").val().trim() != "") {
$("button").prop('disabled', false);
} else {
$("button").prop('disabled', true);
}
});
});
</script>
</head>
<body>
<div class="input-wrap">
<select class="select-class" id="selectId">
<option value="Reject">Reject</option>
<option value="Earn">Earn</option>
</select>
</div>
<div class="input-wrap">
<textarea class="textarea-class" id="textid"></textarea>
</div>
<button type="button" class="button-class">Update</button>
</body>
</html>
uj5u.com熱心網友回復:
您可以使用和運算子 (&&)
if(this.value == "reject" && ... your other condition) {
// both conditions are met
}else {
// one or more condition is not met
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/359922.html
標籤:javascript 查询
