如何根据页面加载时选中的单选按钮禁用文本区域？

Question

我想改进此 script 以通过单选按钮选择禁用文本区域。 Currently when "yes" is selected the text areas should be disabled and enabled when "no" is selected.

我需要更改什么才能在页面首次加载时禁用文本区域并且是否选中了正确的单选按钮？（如果未进行任何更改则默认选中是）

请记住，此页面将被刷新并重定向到，因此我需要检查单选按钮上的实际选择。我之前只是将它们设置为在加载时全部禁用，但即使我选择了正确的单选按钮，也会禁用文本区域。

HTML

<div class="group">
    <input type="radio" name="choice1" value="yes" checked/>Yes
    <input type="radio" name="choice1" value="no" />No
</div>
<div class="group">
    <input type="radio" name="choice2" value="yes" checked/>Yes
    <input type="radio" name="choice2" value="no" />No
</div>
<div class="group">
    <input type="radio" name="choice3" value="yes" checked/>Yes
    <input type="radio" name="choice3" value="no" />No
</div>        
<div>
    <textarea data-trigger="choice1" rows="4" cols="20"></textarea>
    <textarea data-trigger="choice2" rows="4" cols="20"></textarea>
    <textarea data-trigger="choice3" rows="4" cols="20"></textarea>
</div>

Javascript/JQuery

    $(function () {

    var $choices = $(".group").find(":radio");
    $choices.on("change", function () {
        var $this = $(this);
        var choiceName = $this.attr('name'); 
        var tarea = $('[data-trigger="' + choiceName + '"]');
        if ($this.val() === "yes") {
            tarea.val('');
            tarea.prop('readonly', true);
            tarea.css('background-color', '#EBEBE4');
        } else {
            tarea.prop('readonly', false);
            tarea.css('background-color', '#FFFFFF');
        }
    });
});

希望已经足够清楚了。

Answer 1

尝试

$(".group").find(":radio[value=yes]:checked").each(function () {
    $('[data-trigger="' + $(this).attr("name") + '"]').prop('readonly', true).css('background-color', '#EBEBE4');
});

DEMO

Answer 2

将 class 属性添加到您的文本区域

<div>
    <textarea data-trigger="choice1" rows="4" cols="20" class="group"></textarea>
    <textarea data-trigger="choice2" rows="4" cols="20" class="group"></textarea>
    <textarea data-trigger="choice3" rows="4" cols="20" class="group"></textarea>
</div>

在你的脚本中：-

$( document ).ready(function() {
 $("textarea.group").attr("disabled", true);
});

如何根据页面加载时选中的单选按钮禁用文本区域？

How do I disable text areas based on what radio button is checked when the page loads?

javascript

jquery

radio-button