javascript - 如何使用 jquery 切换所有子元素的只读属性

Question

描述

所以我有一个带有按钮的表单，单击该按钮时我想切换字段集的所有子元素的只读属性。

HTML:

<form>
    <fieldset id="F1">
        <textarea id="T1" rows="5" cols="50" readonly required></textarea><br>
        <textarea id="T2" rows="5" cols="50" readonly required></textarea><br>
        <textarea id="T3" rows="5" cols="50" readonly required></textarea><br>
    </fieldset>
    <button type="button" id="button" onclick="togglerequire('#F1')">
        Click Me
        </button>
</form>

jquery:

function togglerequire(id){
    $(id).children().each(function(){
        var re = $(this).prop('required');
        $(this).prop('required', !re);
    });
}

回到问题:

我可以通过 id 使它对单个元素起作用，但是一旦我尝试对父 id 定义的子元素执行切换，它就会停止工作，我不明白为什么。

Answer 1

你需要更新函数如下

function togglerequire(id){
    $(id).children("textarea").each(function(){
        var re = $(this).prop('readonly'); 
        $(this).prop('readonly', !re);
    });
}

请注意您切换了错误的属性。此外，我们最好能提供特定的选择器，例如 textarea 或 class 等。