Блог

Главная - Вопросы по программированию - отключите текстовое поле, получив элемент по идентификатору и имени класса

отключите текстовое поле, получив элемент по идентификатору и имени класса

#javascript

Вопрос:

Я хочу отключить с помощью текстового поля, используя имя класса и идентификатор. Может кто-нибудь сказать мне, почему это не работает. Это работает, если я получаю элементы только по идентификатору.

 function disableText() {

  var textbox = document.getElementByClassName("text");
  if (document.getElementById("check").checked == true) {

    textbox[0].disabled = true;


  } else {
    textbox[0].disabled = false;

  }


} 
 <input type="checkbox" id="check" value="check" onclick="disableText()">

<input class="text" type="textbox">

Комментарии:

1. Это getElementsByClassName() множественное число «элементы», и оно возвращает список совпадающих элементов.

2. Вам не хватает события триггера, которое вызывает вашу функцию, это может быть «on_click» над элементом управления флажком.

3. также это должно быть disabled не в прошедшем времени disable , onclick или onchange тогда ="disableText()"

Ответ №1:

Проблема в двух опечатках и отсутствии триггера.

Опечатки:

  • getElementByClassName должно быть getElementsByClassName (элементы во множественном числе)
  • disable должно быть disabled (прошедшее время)

Спусковой крючок:

  • onchange , onclick , oninput затем ="disableText()" на флажке
 function disableText() {
  var textbox = document.getElementsByClassName("text");
  if (document.getElementById("check").checked == true) {

    textbox[0].disabled = true;


  } else {
    textbox[0].disabled = false;

  }
} 
 <input type="checkbox" id="check" value="check" onclick="disableText()">

<input class="text" type="textbox">

Или чтобы вообще не использовать проверку флажка, просто установите значение «отключено» в значение флажка

 function disableText() {
  var textbox = document.getElementsByClassName("text");
  textbox[0].disabled = document.getElementById("check").checked;
} 
 <input type="checkbox" id="check" value="check" onclick="disableText()">

<input class="text" type="textbox">

Ответ №2:

Вы можете сделать это всего в одной строке, без JS внутри HTML-кода.

 check.onclick = () => {document.getElementsByClassName("text")[0].disabled = check.checked}; 
 <input type="checkbox" id="check" value="check">
<input class="text" type="textbox">
Метки: ,