Блог

У меня есть форма отправки, для которой требуется проверить хотя бы один переключатель. У меня уже есть код для получения значения переключателя:

 let myQuery = document.querySelector('input[name="#myName"]:checked').value;
  

Если это возвращает какое-либо значение (это строка текста), то могу ли я сделать:

 document.getElementById("#ButtonID").removeAttribute("disabled");
  

У меня кнопка отправки в настоящее время «отключена», поэтому удаление атрибута работает идеально, позволяя пользователям отправлять сообщения после того, как они проверили переключатель.

Как мне ввести это в этот querySelector? У меня уже есть набор переменных, которые берутся из .value для переключателя, который нажал пользователь.

Большое спасибо 🙂

Поскольку вы не предоставили свой 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.

Основываясь на других ответах, мы можем создать форму, в которой по умолчанию переключатели не выбраны, но для отправки формы требуется выбор:

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.

Обычно, в качестве обычного использования переключателя, мы выбираем 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>  

Ваш код верен, вы допустили одну ошибку, используя ‘#’ в методе 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>