仅在选择单选按钮时启用文本区域答案

【问题标题】：Enable a textarea only if a radio button is selected仅在选择单选按钮时启用文本区域
【发布时间】：2012-03-13 16:33:02
【问题描述】：

我正在构建的这个网站中有一个反馈系统，并要求用户就他们收到的服务提供反馈。他们可以选择提供实际反馈或跳过整个事情。我有 2 个单选按钮（1 个是正面的；另一个是负面的）

<input type="radio" name="rating" value="1" id="green" /><label for="green">Positive</label><br />
<input type="radio" name="rating" value="0" id="red" /><label for="red">Negative</label>

然后，我有一个textarea 供用户提供实际反馈。

<textarea style="width: 95%;" rows="6" name="feedback"></textarea>

如果用户点击实际的单选按钮，我宁愿仅启用 textarea。如果不是，则 textarea 保持禁用状态。我该怎么办？（我在想 jQuery）

谢谢各位。

[编辑]

感谢您的快速输入，伙计们。另外，如果我可以添加，假设我正在从 MySQL 中的数据生成行。这使得名称（即，对于用户 ID 1）name=rating[1] 和 name=feedback[1]。如何使用 jQuery 选择它们？

【问题讨论】：

标签： jquery textarea radio

【解决方案1】：

你应该像这样设置文本区域

<textarea style="width: 95%;" rows="6" name="feedback" disabled></textarea>

然后

$('input[name=rating]').click(function(){
   $('textarea[name=feedback]').removeProp('disabled');
})

【讨论】：

只是对 OP 的说明，说 removeProp 仅适用于 1.6 及更高版本，attr 适用于 1.6 之前的版本
谢谢，如果假设我从 MySQL 中的数据生成行怎么办。这使得名称（即，对于用户 ID 1）name=rating[1] 和 name=feedback[1]。我的错，我忘了在问题中包含这个。
@MikeSanchez 那么你必须转义像这样的特殊字符$('input[name=rating\\[1\\]]')
@Nicola 这适用于用户 ID 1。用户 ID 2、3、4 等怎么样。我估计大约有一百个用户。
@MikeSanchez 使用 attribute starts with selector: $('input[name^=rating]')

【解决方案2】：

如果你使用的是 jQuery 1.7+，你可以这样做：

$("input[name=rating]").click(function(){
    $("#textareaid").prop("disabled", this.checked);
});

（注意 prop 与 attr 的使用）

【讨论】：

【解决方案3】：

$('input[name="rating"]').on('change', function() {
    $('textarea[name="feedback"]').show();
});

http://jsfiddle.net/933DJ/

根据您的评论更新：

$('input[name="rating"]').on('change', function() {
    $('textarea[name="feedback"]').attr('disabled', false).focus();
});

http://jsfiddle.net/933DJ/1/

【讨论】：

谢谢，虽然我希望文本区域显示而不是隐藏。
谢谢！你能检查一下吗：jsfiddle.net/hqfBt我希望 jQuery 只启用与单选按钮对应的文本区域，而不是所有的文本区域。
感谢您的麻烦。 '珍惜它，伙计。

【解决方案4】：

<form name="f1" action="" >
<input type="radio" name="rating" value="1" id="green" onclick="somefunction(0)"/><label for="green">Positive</label><br />
<input type="radio" name="rating" value="0" id="red" onclick="somefunction(1)" /><label for="red">Negative</label>
<textarea style="width: 95%;" rows="6" name="feedback" readonly="readonly" ></textarea>
</form>
<script type="text/javascript">

function somefunction(val)
{
    if(val)
document.f1.feedback.setAttribute("readonly",val)
else
document.f1.feedback.removeAttribute("readonly",val)


}
</script>

【讨论】：