Форум

nraw · #1 (**permalink**) 20.07.2012, 18:32

Здравствуйте. В форме нужно сделать несколько (не все) <input type="text"> неактивными. Сделал так:

if (document.getElementById("tb1").checked) {
document.getElementById("tbnum").disabled = false;
}
else {
document.getElementById("tbnum").disabled = true;
}

Это работает в Opera и FF, а в Chrome и IE нет.

А как сделать, чтобы было кроссбраузерно?

lord2kim · #2 (**permalink**) 20.07.2012, 18:41

nraw, в IE 8 и Chrome 20 все робит...

<html>
<head>
<title></title>
<script>
function a() {
if (document.getElementById("tb1").checked) {
document.getElementById("tbnum").disabled = false;
}
else {
document.getElementById("tbnum").disabled = true;
}
}
</script>
</head>
<body>
<input type="checkbox" value="asd" id="tb1" onClick="a()">
<input type="text" id="tbnum">
</body>
</html>

nraw · #3 (**permalink**) 20.07.2012, 19:04

Наверно, я не полностью сформулировал вопрос. В Chrome и IE сразу после загрузки страницы чекбокс не выделен и поле для текста активно, по крайней мере у меня именно так. Поле <input type="text"> становится неактивным, если поставить, а затем снять галочку.
Может я что-то не так делаю? Подскажите...

Deff · #4 (**permalink**) 20.07.2012, 19:07

nraw,

<script type="text/javascript">
function ONNnclick(){
  if (document.getElementById("tb1").checked) {// alert("A")
document.getElementById("tbnum").disabled=false;
  }
  else {
document.getElementById("tbnum").disabled=true;
  }
}
</script>


<input  id="tb1" type="checkbox"  checked="false" onclick="ONNnclick()" autocomplete="off"/>
<input  id="tbnum" type="text" value="Тра-та-та"/>
<script type="text/javascript">
document.getElementById("tb1").click()
</script>

lord2kim · #5 (**permalink**) 20.07.2012, 19:09

Сообщение от nraw

Наверно, я не полностью сформулировал вопрос. В Chrome и IE сразу после загрузки страницы чекбокс не выделен и поле для текста активно, по крайней мере у меня именно так. Поле <input type="text"> становится неактивным, если поставить, а затем снять галочку.
Может я что-то не так делаю? Подскажите...

<html>
<head>
<title></title>
<script>
function a() {
if (document.getElementById("tb1").checked) {
document.getElementById("tbnum").disabled = false;
}
else {
document.getElementById("tbnum").disabled = true;
}
}
</script>
</head>
<body>
<input type="checkbox" value="asd" id="tb1" onClick="a()">
<input type="text" id="tbnum">
<script>window.onload = a;</script>
</body>
</html>

либо так (18 строка), либо нарисуйте атрибут disabled у текстового поля изначально...

nraw · #6 (**permalink**) 20.07.2012, 19:41

Спасибо, получилось с атрибутом disabled.

nraw · #7 (**permalink**) 21.07.2012, 12:08

Еще возник вопрос. Если я таким образом пытаюсь включить несколько подряд инпутов, то это не работает. При этом работает, если ставить галки начиная от последнего элемента к первому по порядку. Работает только отдельно какой-либо из выбранных, а остальные неактивны. Как это реализовать?

bes · #8 (**permalink**) 21.07.2012, 12:36

<div>
  <input type="checkbox">
  <input disabled>
  <input disabled>
  <input disabled>
</div>
<div>
  <input type="checkbox">
  <input disabled>
  <input disabled>
  <input disabled>
</div>


<script>
window.onload = function () {//onload begin

  document.body.onclick = function (e) {//onclick begin
    e = e || event;
    var target = e.target || e.srcElement;
 
    if (target.type == 'checkbox') {
      var inp = target.parentNode.children;
      var len = inp.length;
      if (target.checked == true) {
        for (var i = 1; i < len; i++) {
          inp[i].disabled = false;
        }
      } else {
        for (var i = 1; i < len; i++) {
          inp[i].disabled = true;
        }
      }
    }

  }//onclick end

}//onload end
</script>

nraw · #9 (**permalink**) 21.07.2012, 14:02

У меня элементы input находятся в ячейках таблицы

<table>
<tr><td>Название</td><td>Значение</td><td>Количество</td></tr>
<tr>
<td>
<p><input type="checkbox" value="tb1" id="tb1"></p>
</td>
<td>
<p><input type="text" id="tb1val" disabled></p>
</td>
<td>
<p><input type="checkbox" value="num1" id="num1"><input type="text" id="tbnum1" disabled></p>
</td>
</tr>
<tr>
<td>
<p><input type="checkbox" value="tb2" id="tb2"></p>
</td>
<td>
<p><input type="text" id="tb2val" disabled></p>
</td>
<td><p><input type="checkbox" value="num2" id="num1"><input type="text" id="tbnum2" disabled></p>
</td>
</tr>
</table>

поэтому код не работает, а точнее работает частично (только в колонке "Количество"). Если я правильно понял, не работают эти строки?

var inp = target.parentNode.children;
      var len = inp.length;

devote · #10 (**permalink**) 21.07.2012, 14:28

elem.setAttribute('disabled', 'disabled'); // сделать неактивной
elem.removeAttribute('disabled'); // сделать активной
// кроссбраузерно

Форум

Справочник

Discord чат

Курсы javascript