javascript - jQuery 到 Javascript 添加必需的属性

Question

因此，我构建了以下 jQuery 代码，用于检查 #rtk5 上是否已触发更改事件，然后删除或添加“required”属性。

在 jQuery 中完美运行:

// Make checkbox textboxes not required unless checked
$(document).ready(function() {
    $('#rtk5').change(function() {
        if ($('.rtk5ReqField').attr('required')) {
            $('.rtk5ReqField').removeAttr('required');
        }
        else {
            $('.rtk5ReqField').attr('required','required');
        }
    });
});

我想通过函数调用将其转换为 JavaScript，但我似乎不知道如何正确执行它。

错误:
TypeError: rtk5req.getAttribute is not a function

这是我的尝试:

var rtk5req = document.getElementsByClassName('rtk5ReqField');
function rtk5Required() {
    rtk5req.addEventListener('change', (e) => {
        if (rtk5req.getAttribute('required')) {
            rtk5req.removeAttribute('required');
        } else {
            rtk5req.getAttribute('required', 'required');
        }
    });
}
rtk5req.addEventListener('change', rtk5Required());
document.addEventListener('DOMContentLoaded', rtk5Required);
rtk5Required();

更新了代码:删除了重复的更改调用

var rtk5req = document.getElementsByClassName('rtk5ReqField');
function rtk5Required() {
        if (rtk5req.getAttribute('required')) {
            rtk5req.removeAttribute('required');
        } else {
            rtk5req.getAttribute('required', 'required');
        }
}
rtk5req.addEventListener('change', rtk5Required());
document.addEventListener('DOMContentLoaded', rtk5Required);
rtk5Required();

更新代码#2:

感谢大家的辛勤工作，我仍然遇到一个小问题，必须进行一些调整 - 当我取消选中该复选框时，它不会删除 rtk5Declaration 上放置的所需标签。它在 jQuery 中是这样做的。

var rtk5_selection = document.getElementById('rtk5');

document.addEventListener('DOMContentLoaded', () => {
    rtk5_selection.addEventListener('change', () => {
        if (rtk5_selection.getAttribute('required')) {
            document.getElementById('rtk5Declaration').removeAttribute('required');
        } else {
            document.getElementById('rtk5Declaration').setAttribute('required', 'required');
        }
    });
});

非常感谢大家!

Answer 1

由于您只有一个元素，因此您应该使用其 ID 而不是其类，并避免 document.getElementsByClassName 返回元素的伪数组而不是单个元素导致的复杂化。

注意:使用 setAttribute 更改属性的值，或者更好(如下面的代码所示)使用反射(reflect)元素 的直接 bool property属性。

document.addEventListener('DOMContentLoaded', () => {

    const rtk_sel = document.getElementById('rtk5');
    const rtk_dec = document.getElementById('rtk5Declaration');

    rtk_sel.addEventListener('change', () => {
        rtk_dec.required = !rtk_sel.checked;
    });
});