如果选择了单选按钮，则禁用文本区域？

Question

我有一个表单，希望在选择“否”单选按钮之前“灰显” 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" })

解决这个问题的好方法是什么？ 我对javascript来说还很陌生，它附带了一些额外的文字来解释您的工作状况会很好。

Answer 1

EDIT2：$（“ input [name ='group1']”）。change侦听名称为“ group1”的单选组中的更改。 当它触发时，您检查更改发生的位置（“ $（this）.val（）=='no'”表示更改是在第二个单选按钮中触发的，该按钮的值为“ no”），然后执行逻辑。

编辑（更好）：

$("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/

原版的：

使用JQuery：

使用只读并添加背景色使其具有与禁用状态相同的外观。

$("#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/

Answer 2

Javascript函数可以为您完成此操作，如下所示：

<script type="text/javascript">
  function enableTextArea() {
     var el = document.getElementById("radio2");
     document.getElementById("textArea").readOnly = !el.checked;
  }  
</script>

HTML：

@Html.RadioButtonFor(p => Model.Questions[i].AnswerSelected, false, new { id="radio2", onclick = "enableTextArea()" }) No

Answer 3

在JQuery中，也可以这样完成：

$('#radio2').click(function(){
    $('#textArea').attr("disabled", false);
})