jQuery 到 Javascript 添加必需的属性

Question

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

在 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 来更改属性的值，或者更好（如下面的代码所示）使用反映元素属性的直接布尔属性 .

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;
    });
});

Answer 2

感谢大家的贡献，下面是我调整的工作版本：

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

function rtd3Declaration() {
    if (!rtk5_selection.checked) {
        rtd3declaration.removeAttribute('required');
    } else {
        rtd3declaration.setAttribute('required', 'required');
    }
}
rtk5_selection.addEventListener('change', rtd3Declaration);
document.addEventListener('DOMContentLoaded', rtd3Declaration);
rtd3Declaration();