#javascript #twitter-bootstrap #radio-button
#javascript #twitter-bootstrap #переключатель
Вопрос:
У меня есть форма отправки, для которой требуется проверить хотя бы один переключатель. У меня уже есть код для получения значения переключателя:
let myQuery = document.querySelector('input[name="#myName"]:checked').value;
Если это возвращает какое-либо значение (это строка текста), то могу ли я сделать:
document.getElementById("#ButtonID").removeAttribute("disabled");
У меня кнопка отправки в настоящее время «отключена», поэтому удаление атрибута работает идеально, позволяя пользователям отправлять сообщения после того, как они проверили переключатель.
Как мне ввести это в этот querySelector? У меня уже есть набор переменных, которые берутся из .value для переключателя, который нажал пользователь.
Большое спасибо 🙂
Комментарии:
1. не могли бы вы предоставить html для элементов
Ответ №1:
Поскольку вы не предоставили свой HTML-шаблон, я предполагаю, что что-то вроде этого:
let input = document.querySelector('input[name="Name"]');
input.addEventListener("change", () => {
console.log(input.value)
document.getElementById("ButtonId").removeAttribute("disabled");
});
<form>
<p>Please click on the Name:</p>
<fieldset>
<input type="radio" name="Name" value="Name">
<label for="Name"> Name</label>
</fieldset>
<button id="ButtonId" disabled>
Submit
</button>
</form>
Итак, что вы ищете, предположительно, это addEventListener.
Комментарии:
1. Привет, не могли бы вы предоставить более подробную информацию? Что именно не работает? Что вы пробовали до сих пор? Как выглядит ваш HTML-код?
Ответ №2:
Основываясь на других ответах, мы можем создать форму, в которой по умолчанию переключатели не выбраны, но для отправки формы требуется выбор:
HTML:
<h1>test form</h1>
<form>
<div>
<label>
<input type="radio" name="a-radio-group" value="first" />
first
</label>
<label>
<input type="radio" name="a-radio-group" value="second" />
second
</label>
<label>
<input type="radio" name="a-radio-group" value="third" />
third
</label>
</div>
<div>
<button id="button" disabled>submit</button>
</div>
</form>
JS:
document.querySelector('form')
.addEventListener('click',
function(event) {
const checkedRadioInputs =
document.querySelectorAll('input[name="a-radio-group"]:checked');
if(checkedRadioInputs.length) {
document
.querySelector('button')
.removeAttribute('disabled');
}
}
);
У вас, вероятно, уже есть что-то из этого, но я хочу подробнее остановиться на трех частях:
- Во-первых, переключатели предназначены для использования в группах, и все радиостанции в этой группе должны иметь одинаковый атрибут ‘name’. При этом, если пользователь выберет опцию, он «снимет галочки» со всех других опций радио и «проверит» вновь выбранную опцию. Подробнее о переключателях.
- Я устанавливаю прослушиватель «click» для родительского элемента формы, чтобы мы могли отслеживать изменения во всей форме. Если у вас нет родительского элемента формы, то вам придется добавить обработчики onChange к каждому радиовходу и отслеживать состояние. Я думаю, что способ формирования более прост и по возможности избегал бы последнего подхода.
- Если вы используете querySelectorAll, то вы получаете обратно массив, и вы можете просто проверить длину массива: если длина равна 0, то ничего не выбрано. Подробнее о querySelectorAll.
Ответ №3:
Обычно, в качестве обычного использования переключателя, мы выбираем 1 кнопку по умолчанию. Но если вы хотите, чтобы он не был выбран изначально, то ,
function hello() {
// body...
let button1 = document.getElementsByName("a").checked;
console.log(button1);
document.getElementById("gn").disabled=false;
}
<form>
<input type="radio" value="a" name="a" onclick="hello()">daknd<br>
<input type="radio" value="b" name="a" onclick="hello()">hmm
<button id="gn" type="submit" disabled>hmm</button>
</form>
Комментарии:
1. Я думаю, я могу просто выбрать один по умолчанию. Честно говоря, это не конец света.
Ответ №4:
Ваш код верен, вы допустили одну ошибку, используя ‘#’ в методе getElementById(). Нам нужен знак ‘#’ в jQuery, но в javascript он принимает только имя идентификатора.
document.getElementById("#ButtonID").removeAttribute("disabled");
<script>
function checkStatus(obj)
{
if(obj.value != "")
{
document.getElementById("button").removeAttribute("disabled");
}
}
</script>
<form id="" name="" action="" method="">
<li><input type="radio" name="a" id="RAD_1" value="RAD_1"
onclick="checkStatus(this);">Hello 1</input></li>
<li><input type="radio" name="a" id="RAD_2" value="RAD_2"
onclick="checkStatus(this);">Hello 2</input></li>
<li><input type="submit" name="submit" id="button" value="Submit" disabled>
</input>
</form>
Комментарии:
1. # был только для целей отображения, фактически не в коде. Чтобы напомнить мне ввести соответствующее значение, когда дело дойдет до его кодирования.