jQuery до Javascript добавление обязательного атрибута

Question

Итак, у меня есть следующий jQuery код, который я построил, который проверяет, было ли запущено событие on change на # 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

Поскольку у вас есть только один элемент, вы должны использовать его идентификатор вместо класса и избегать сложностей, вызванных document.getElementsByClassName возвратом псевдомассива элементов вместо одного элемента.

NB: используйте 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();