Форум

greencard · #1 (**permalink**) 14.02.2014, 12:45

Здравствуйте, подскажите, как решить такую задачу.
Есть n checkboxов и несколько классов.
Нужно, чтоб при нажатии на checkbox блокировались checkboxы с другими классами

<input type="checkbox" name="ck[]" class="test" value="1">1
<input type="checkbox" name="ck[]" class="tovary" value="2" >2 
<input type="checkbox" name="ck[]" class="test" value="3">3
<input type="checkbox" name="ck[]" class="tovary" value="3" >3

рони · #2 (**permalink**) 14.02.2014, 13:05

greencard,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
  window.onload = function () {
    var ck =  document.querySelectorAll('[name="ck[]"]');
    document.onclick = function (a) {
        a = a.target || window.event.srcElement;
       if(a.name == "ck[]") {
         for (var i=0; i<ck.length; i++) {
          ck[i].disabled =  ck[i] != a ? a.checked : false
  		}
       }
    }
  }
</script>
</head>
<body>
<input type="checkbox" name="ck[]" class="test" value="1"  >1
<input type="checkbox" name="ck[]" class="tovary" value="2" >2
<input type="checkbox" name="ck[]" class="test" value="3">3
<input type="checkbox" name="ck[]" class="tovary" value="3" >3
</body>
 </html>

danik.js · #3 (**permalink**) 14.02.2014, 13:10

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

function (a) {
a = a.target || window.event.srcElement;

рони, опять за свое?

Твой код не работает в IE8

И вобще, прочитай вопрос внимательно.

рони · #4 (**permalink**) 14.02.2014, 13:31

danik.js,
ну теперь то твоя душенька довольна ?

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
  window.onload = function () {
    document.onclick = function (e) {
       var target = e && e.target || event.srcElement;
       if(target.name == "ck[]") {
         var ck =  document.querySelectorAll('.'+target.className),
         disabled = false;
         for (var i=0; i<ck.length; i++) {
         if(ck[i].checked)  {disabled=true; break}
  		}
         ck =  document.querySelectorAll('[name="ck[]"]:not(.'+target.className+')')
         for (var i=0; i<ck.length; i++) {
          ck[i].disabled = disabled
  		}
       }
    }
  }
</script>
</head>
<body>
<input type="checkbox" name="ck[]" class="test" value="1"  >1
<input type="checkbox" name="ck[]" class="tovary" value="2" >2
<input type="checkbox" name="ck[]" class="test" value="3">3
<input type="checkbox" name="ck[]" class="tovary" value="3" >3
</body>
 </html>

danik.js · #5 (**permalink**) 14.02.2014, 13:37

рони, опять не работает в IE8. Сам то доволен?
Вешать клик на document, ждать onload - не гуд.

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

el.checked && inp.className != el.className ? true: false

Зачем усложнять? Просто el.checked && inp.className != el.className - это выражение само по себе вернет true или false

danik.js · #6 (**permalink**) 14.02.2014, 13:40

greencard, делать некликабельные подписи к контролам - терроризировать пользователя )

<label><input type="checkbox" /> 1</label>

рони · #7 (**permalink**) 14.02.2014, 13:49

danik.js,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
    document.onclick = function (e) {
       var target = e && e.target || event.srcElement;
       if(target.name == "ck[]") {
         var ck =  document.getElementsByName('ck[]'),
         disabled = false;
         for (var i=0; i<ck.length; i++) {
         if(ck[i].checked && target.className == ck[i].className)  {disabled=true; break}
  		}
         for (var i=0; i<ck.length; i++) {
          if(target.className != ck[i].className) ck[i].disabled = disabled
  		}
       }
    }
</script>
</head>
<body>
<label><input type="checkbox" name="ck[]" class="test" value="1"  >1</label>
<label><input type="checkbox" name="ck[]" class="tovary" value="2" >2</label>
<label><input type="checkbox" name="ck[]" class="test" value="3">3</label>
<label><input type="checkbox" name="ck[]" class="tovary" value="3" >3</label>
</body>
 </html>

greencard · #8 (**permalink**) 14.02.2014, 14:00

Спасибо огромное

Я уже несколько дней голову ломал

greencard · #9 (**permalink**) 14.02.2014, 14:01

Сообщение от danik.js

greencard, делать некликабельные подписи к контролам - терроризировать пользователя )

<label><input type="checkbox" /> 1</label>

Спасибо, я учту

Vlasenko Fedor · #10 (**permalink**) 14.02.2014, 14:02

<div id="block">
  <input type="checkbox" name="ck[]" class="test" value="1">1
  <input type="checkbox" name="ck[]" class="tovary" value="2">2
  <input type="checkbox" name="ck[]" class="test" value="3">3
  <input type="checkbox" name="ck[]" class="tovary" value="3">3</div>
<script>
  block.onclick = function (e) {
    var el = e ? e.target : window.event.srcElement;
    if (el.tagName != "INPUT") return;
    var inps = this.getElementsByTagName('input'),
      len = inps.length,
      len1 = len,
      check = false,
      inp;
    for (; len--;) {
      if (inps[len].checked) {
        check = true;
        break;
      }
    }
    for (; len1--;) {
      inp = inps[len1];
      inp.disabled = check && inp.className != el.className;
    }
  };
</script>

Форум

Справочник

Discord чат

Курсы javascript