[英]Disable text area if radio button is selected?
I have a form where I would like to "grey out" the textArea until the "No" radio button is selected. 我有一个表单,希望在选择“否”单选按钮之前“灰显” textArea。
@Html.RadioButtonFor(p => Model.Questions[i].AnswerSelected, true, new { id="radio1" }) Yes
@Html.RadioButtonFor(p => Model.Questions[i].AnswerSelected, false, new { id="radio2" }) No
@Html.TextAreaFor(p => Model.Questions[i].ActionToTake, new { id="textArea" })
Whats a good way to approach this? 解决这个问题的好方法是什么? I'm fairly new to javascript a bit of additional text explaining what you're doing would be nice. 我对javascript来说还很陌生,它附带了一些额外的文字来解释您的工作状况会很好。
EDIT2: $("input[name='group1']").change listens for changes in the radio group with name "group1". EDIT2:$(“ input [name ='group1']”)。change侦听名称为“ group1”的单选组中的更改。 When it fires you check where the change happened ("$(this).val() == 'no'" means that the change was triggered in the second radio button that has a value of "no") and then you do your logic. 当它触发时,您检查更改发生的位置(“ $(this).val()=='no'”表示更改是在第二个单选按钮中触发的,该按钮的值为“ no”),然后执行逻辑。
EDIT(Better): 编辑(更好):
$("input[name='group1']").change(function(e){
if($(this).val() == 'no') {
$("#text1").prop('readonly', true);
$("#text1").css('background-color', '#EBEBE4');
} else if($(this).val() == 'yes') {
$("#text1").prop('readonly', false);
$("#text1").css('background-color', '#FFFFFF');
}
});
@Html.RadioButtonFor(p => Model.Questions[i].AnswerSelected, true, new { id="radio1", name="group1", value="yes" }) Yes
@Html.RadioButtonFor(p => Model.Questions[i].AnswerSelected, false, new { id="radio2", name="group1", value="no" }) No
https://jsfiddle.net/vaxc3eo5/3/ https://jsfiddle.net/vaxc3eo5/3/
ORIGINAL: 原版的:
Using JQuery: 使用JQuery:
Using the readonly and adding background color to have the same look as disabled. 使用只读并添加背景色使其具有与禁用状态相同的外观。
$("#radio2").change(function(){
$("#text1").prop('readonly', true);
$("#text1").css('background-color', '#EBEBE4');
});
$("#radio1").change(function(){
$("#text1").prop('readonly', false);
$("#text1").css('background-color', '#FFFFFF');
});
https://jsfiddle.net/vaxc3eo5/2/ https://jsfiddle.net/vaxc3eo5/2/
A Javascript function could do this for you, something like this: Javascript函数可以为您完成此操作,如下所示:
<script type="text/javascript">
function enableTextArea() {
var el = document.getElementById("radio2");
document.getElementById("textArea").readOnly = !el.checked;
}
</script>
HTML: HTML:
@Html.RadioButtonFor(p => Model.Questions[i].AnswerSelected, false, new { id="radio2", onclick = "enableTextArea()" }) No
In JQuery it can also be done like this: 在JQuery中,也可以这样完成:
$('#radio2').click(function(){
$('#textArea').attr("disabled", false);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.