根據文本字段值動態禁用選擇菜單
[英]Dynamically disable select menu based on text field value
問題描述
當用戶開始在文本字段中輸入時，我希望能夠在我的頁面上禁用選擇菜單。 這是因為文本字段是輸入數據的另一種方式，禁用下拉菜單將有助於使其更加清晰。
我知道我可以使用這個：
<select name="specialty" id="specialty" disabled="disabled">
永久禁用選擇，但是有沒有辦法在文本字段的值更改時動態分配該屬性？ 我知道沒有 css 屬性可以像文本輸入和 textareas 那樣做。
我發現的是一個 JQuery 解決方案，用於禁用選擇中的選項：
我嘗試修改它以禁用整個選擇但沒有成功（文本字段的 ID 是 testinput）：
<script type="text/javascript">
$("#testinput").change(function(){
$("#specialty").attr("disabled","disabled");
}
);
</script>
這是一個簡化版本（真正的函數應該檢查 testinput 中字符串的長度，並根據它決定是禁用還是啟用選擇），但是如果有人可以幫助我讓它工作，那么修改它很容易。
6 個解決方案
解決方案1
1 2021-03-05 16:54:42
對於最新的 jquery 版本，需要使用 prop() 而不是 attr()。
$('#specialty').prop('disabled', true);
您也可以為此使用 focusin() 和 focusout() 函數。
//disable dropdown when entering text $('#testinput').focusin(function(){ $('#specialty').attr('disabled',true); }); //enable dropdown only if nothing entered $('#testinput').focusout(function(){ if($('#testinput').val().length == 0){ $('#specialty').attr('disabled',false); } });
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <table> <tr> <td>Input: <input type="text" id="testinput"></td> <td> <select name="specialty" id="specialty"> <option value="">--Select--</option> </select> </td> </tr> </table> </body> </html>
解決方案2
0 2012-03-02 17:16:44
試試這個而不是 jQuery
document.getElementById('testinput').disabled = true;
解決方案3
0 2012-03-02 17:21:48
嘗試
$("#specialty").attr("disabled", true);
解決方案4
0 已采納 2012-03-02 17:24:30
對我來說，如果在 DOM 准備好之后聲明事件處理程序，它會起作用：
<script type="text/javascript">
$(document).ready(function() {
$("#testinput").change(function(){
$("#specialty").attr("disabled","disabled");
}
);
});
</script>
但是，這種方式只有在輸入框失去焦點后才會禁用選擇框。 您可能希望改用其中一個按鍵事件。
解決方案5
0 2012-03-02 17:25:04
您的代碼應該按編寫的方式工作（例如，參見http://jsfiddle.net/3QXnq/ ）。 但是要記住一件事 - 文本輸入的 onchange 事件僅在焦點離開文本框時才會觸發。 換句話說，直到他們繼續前進后，下拉菜單才會被禁用。
如果您想在他們開始輸入時立即禁用它，您將需要使用另一個事件，例如 onfocus 或 onkeydown。
解決方案6
0 2012-03-02 17:26:30
如果使用 jQuery 版本 > = 1.6，請使用 prop() 方法為 'disabled'
不完全確定您想要什么測試，但這是基礎知識
$("#testinput").change(function(){
var value=this.value;
var test= value=='' || value.length===x;
$("#specialty").prop("disabled",test);// will enable/disable based on test
})
Javascript：根據選擇菜單的值使用變量填充文本字段的值
[英]Javascript: Populate value of Text Fields with Variables based on Value of Select Menu
Javascript隱藏輸入字段基於選擇更改TEXT而不是VALUE
[英]Javascript Hide Input Field based on Select change TEXT not VALUE
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.