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

Question

我有一个表单，我想 "grey out" textArea 直到 "No" 单选按钮被选中。

@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

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 2

编辑2： $("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:

使用 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/

Answer 3

在JQuery中也可以这样做：

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

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

Disable text area if radio button is selected?

javascript

jquery

radio-button