2014-10-06 21 views
2

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

<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> 

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

+1

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

+0

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

+0

請參見[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

回答

1

有幾個選擇,但基本上如果你想要一個淡入淡出效果,你需要一個顏色去與它一起顯示一個過渡。我的回答是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

編輯:

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

+0

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

+0

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

+0

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

3

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

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

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

+0

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

+0

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

0

以簡單的方式,你可以在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>