Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

JS Код для проверки наличия у input полей класса success и выбора пола

Юрий Шиков Ученик (47), на голосовании 1 год назад
Доброе утро, помогите пожалуйста написать код на JavaScript, который будет проверять имеют ли все input поля кроме полей с айди id_m и id_f класс success, а также выбрано ли одно из radio полей с теми же id_m и id_f, и если все вышеперечисленные требования выполнены, то кнопка с id registration_button становится цвета #4070F7 и DISABLED = TRUE, если нет, то та же кнопка становится серого цвета и DISABLED = FALSE
Голосование за лучший ответ
! Мыслитель (5095) 1 год назад
Конечно, вот код, который решает вашу задачу:

javascript
Copy code
const registrationBtn = document.querySelector('#registration_button');
const inputs = document.querySelectorAll('input:not(#id_m):not(#id_f)');
const maleRadio = document.querySelector('#id_m');
const femaleRadio = document.querySelector('#id_f');

function checkInputs() {
let allInputsValid = true;
inputs.forEach(input => {
if (!input.classList.contains('success')) {
allInputsValid = false;
}
});
return allInputsValid && (maleRadio.checked || femaleRadio.checked);
}

function updateRegistrationBtn() {
if (checkInputs()) {
registrationBtn.disabled = true;
registrationBtn.style.backgroundColor = '#4070F7';
} else {
registrationBtn.disabled = false;
registrationBtn.style.backgroundColor = '#CCCCCC';
}
}

inputs.forEach(input => {
input.addEventListener('input', updateRegistrationBtn);
});

maleRadio.addEventListener('change', updateRegistrationBtn);
femaleRadio.addEventListener('change', updateRegistrationBtn);
Как это работает:

Мы находим элементы кнопки и всех input полей, кроме тех, что имеют id_m или id_f.
Мы определяем функцию checkInputs, которая проверяет, имеют ли все input поля класс success и выбрано ли одно из radio полей.
Мы определяем функцию updateRegistrationBtn, которая вызывает checkInputs и изменяет состояние кнопки в соответствии с результатом проверки.
Мы добавляем обработчики событий на все input поля и на оба radio поля, чтобы каждый раз, когда пользователь вводит данные или выбирает один из полов, функция updateRegistrationBtn вызывалась и обновляла состояние кнопки.
Надеюсь, это помогло!
Яков Гото Искусственный Интеллект (320870) 1 год назад
Я тебе уже написал рабочий вариант. Чего ты еще хочешь?
Похожие вопросы