jQuery 到 Javascript 添加所需的属性

Question

So I have the following jQuery code that I've built out that checks whether a on change event has been triggered on #rtk5 and then either removes or adds the 'required' attribute.

Works perfectly in 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');
        }
    });
});

I would like to convert it to JavaScript with a function call, but I can't seem to figure out how to properly do it.

Error:
TypeError: rtk5req.getAttribute is not a function

Here is my attempt:

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

Updated code : Removed the repetitive change call

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

Updated code #2 :

Thanks all for all the hard work, there's one small issue that I'm still experiencing and had to make some tweaking - When I uncheck the checkbox, it doesn't remove the required tag placed on rtk5Declaration from which it did in the 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');
        }
    });
});

Thanks so much all!

Answer 1

Since you only have one element you should be using its ID instead of its class, and avoiding the complication caused by document.getElementsByClassName returning a pseudo-array of elements instead of a single element.

NB: use setAttribute to change an attribute's value, or better yet (as shown in the code below) use the direct boolean property that mirrors the element's attribute .

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

Thanks all for the contribution, below is the working version which I have tweaked:

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