使输入字段只读其他输入字段

问题描述：

我要让只能借助于其他输入字段值的基础上，例如在读取输入字段的值，使输入字段只读其他输入字段

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

如果有人选择女性，那么，年龄输入应该变成只读，意味着它应该淡出，不能输入任何值。这是可能的，以及如何？

是的，这是可能的。只需设置'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。

编辑：

玩这个后一点点，我改变了动画的长度看起来更自然。

问题解决了，竖起大拇指:) – 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); 
    } 
});

你可能想包含一个'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>

使输入字段只读其他输入字段

相关推荐