javascript - 如果选择单选按钮禁用文本区域？

Question

我有一个表单，我想在其中“变灰”文本区域，直到选择“否”单选按钮。

@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

编辑2: $("input[name='group1']").change 监听名为“group1”的 radio 组中的更改。当它触发时，您检查更改发生的位置(“$(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:

使用 readonly 并添加背景颜色以具有与禁用相同的外观。

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