Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Блокировка checkbox (https://javascript.ru/forum/dom-window/45099-blokirovka-checkbox.html)

greencard 14.02.2014 12:45
Блокировка checkbox
 
Здравствуйте, подскажите, как решить такую задачу.
Есть 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

рони 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 14.02.2014 13:10
Цитата:
Сообщение от рони
function (a) {
        a = a.target || window.event.srcElement;
рони, опять за свое? :nono:
Твой код не работает в IE8 :no:
И вобще, прочитай вопрос внимательно.

рони 14.02.2014 13:31
danik.js,
ну теперь то твоя душенька довольна ? :write: 
<!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 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 14.02.2014 13:40
greencard, делать некликабельные подписи к контролам - терроризировать пользователя )
<label><input type="checkbox" /> 1</label>

рони 14.02.2014 13:49
danik.js,
:blink: 
<!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 14.02.2014 14:00
Спасибо огромное :dance:
Я уже несколько дней голову ломал :)

greencard 14.02.2014 14:01
Цитата:
Сообщение от danik.js (Сообщение 297677)
greencard, делать некликабельные подписи к контролам - терроризировать пользователя )
<label><input type="checkbox" /> 1</label>
Спасибо, я учту :)

Vlasenko Fedor 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>
:)


Часовой пояс GMT +3, время: 08:22.