使輸入字段只讀其他輸入字段

我要讓只能藉助於其他輸入字段值的基礎上，例如在讀取輸入字段的值，使輸入字段只讀其他輸入字段

<form action=""> 
<input type="radio" name="sex" value="male">Male<br> 
<input type="radio" name="sex" value="female">Female <br/> 
Age: <input type="text" name="age"><br> 
</form>

如果有人選擇女性，那麼，年齡輸入應該變成只讀，意味着它應該淡出，不能輸入任何值。這是可能的，以及如何？

來源

2014-10-06 Rizz

是的，這是可能的。只需設置'readonly'屬性即可。如果它不適合你，請顯示你的嘗試代碼，我們會幫你修復它。 – Barmar 2014-10-06 01:41:24

@Barmar，我正在試圖只讀基於男性或女性的年齡，如果有人選擇女性，那麼它應該成爲只讀，否則它保持不變。 – Rizz 2014-10-06 01:44:31

請參見[Attribute Equals Selector \ [name =「value」\]]（http://api.jquery.com/attribute-equals-selector/）和['.prop（）']（http：// api。 jquery.com/prop/） – Sean 2014-10-06 01:45:01

有幾個選擇，但基本上如果你想要一個淡入淡出效果，你需要一個顏色去與它一起顯示一個過渡。我的回答是jQuery disable enable click event with fade

的JQuery的實現：

$('input[type=radio]').click(function() { 
    if ($(this).val() == "female") { 
     // disable input 
     $('input[name=age]').fadeOut(20, function() { 
      $(this).prop('disabled', true); 
      $(this).css('background', '#c0c0c0').fadeIn(1000); 
     }); 
    } else { 
     //enable input 
     $('input[name=age]').prop('disabled', false); 
     $('input[name=age]').css('background', '#ffffff'); 
    } 
});

這裏是一個demonstration。

編輯：

玩這個後一點點，我改變了動畫的長度看起來更自然。

來源

2014-10-06 02:13:40 EternalHour

問題解決了，豎起大拇指:) – Rizz 2014-10-06 02:25:04

@dpDesignz，不知道爲什麼你稍微改變它後沒有得到編輯的功勞。但很好的見解。 – EternalHour 2014-10-06 02:59:04

@EternalHour謝謝。 :)。我可以問你爲什麼改變淡入值？我以爲你改變了動畫的順利外觀。小提琴依然如此？ – dpDesignz 2014-10-06 21:53:51

您是否嘗試過使用JQuery？試試這個

$('input[type=radio][name=sex]').change(function() { 
    if (this.value == 'female') { 
     $("#AgeId").prop("readonly",true); 
    } 
    else{ 
     $("#AgeId").prop("readonly",false); 
    } 
});

來源

2014-10-06 01:46:27

你可能想包含一個'else'，這樣當值被改變時，'readonly'被刪除。 – Sean 2014-10-06 01:50:34

我只基於他的陳述，但提出一個else語句是一個更好的主意。 – 2014-10-06 02:21:48

+1乾淨，清晰的例子 – Sean 2014-10-06 02:32:08

以簡單的方式，你可以在javascript函數中禁用。

<script language="javascript"> 
    function female_CLK(){ 
     document.getElementById("age").readOnly = true; 
     document.getElementById("age").style.backgroundColor = "#CCCCCC"; 
    } 
</script> 

<input type="radio" name="sex" value="male">Male<br> 
<input type="radio" name="sex" value="female" onclick="female_CLK()">Female <br/> 
Age: <input type="text" name="age" id="age"><br>

來源

2014-10-06 02:33:55

使輸入字段只讀其他輸入字段

回答

相關問題