Простой вопрос по JS

274

17 сентября 2011 года

Lone Wolf

1.3K / / 26.11.2006

0. мало информации. блоки всегда с одинаковым кол-вом чекбоксов, чекбоксы с одинаковыми id-шниками всегда?
если да, то
1. onclick="func1()"
2. в func1 - просто проверяешь какждый чебокс на чекнутость,если максимальность достигнута не чекнутые перебором дизейблиш
Думаю как проверить на чекнутость или как задизейблить елемент найдете очень легко в гугле.

если же 0 - нет, то тут будет посложнее даже не знаю что присоветовать иходя из того что в ЖС, как вы пишите вы профан

если что не ясно будет - обращайтесь :)

271

17 сентября 2011 года

MrXaK

721 / / 31.12.2002

можно создать объект группы чекбоксов, который будет выводить чекбоксы динамически, по онклику у каждого вызов функции своего объекта, внутри счётчик))
короче набросал на коленке:

Код:

mycheck = function(obj) {

  this.obj = obj;

  this.checks = [];

  this.maxcheck = -1;

  this.curcheck = 0;
};

mycheck.prototype.add = function(s) {

  this.checks.push(s);
};

mycheck.prototype.setMax = function(i) {

  this.maxcheck = i;
};

mycheck.prototype.toString = function() {

  str = '';

  for (var i=0,N=this.checks.length; i<N; i++) {

    str += '<input &#111;&#110;click=\''+this.obj+'.onclick(this);\' type=\'checkbox\' id=\''+this.obj+i+'\' value=1><label for=\''+this.obj+i+'\'>'+this.checks+'</label><br />';

  }

  return str;
};

mycheck.prototype.disable = function() {

  for (var i=0,N=this.checks.length; i<N; i++) {

    document.getElementById(this.obj+i).disabled = true;

  }
};

mycheck.prototype.enable = function() {

  for (var i=0,N=this.checks.length; i<N; i++) {

    document.getElementById(this.obj+i).disabled = false;

  }
};

mycheck.prototype.onclick = function(caller) {

  if (caller.checked ) {

    ++this.curcheck;

    if ( this.curcheck == this.maxcheck) {

      this.disable();

    }

  } else {

    --this.curcheck;

    this.enable();

  }

  return false;
};

mc = new mycheck('mc');

mc.add('ch1_1');

mc.add('ch1_2');

mc.add('ch1_3');

mc.setMax(2);

document.write(mc);

mc2 = new mycheck('mc2');

mc2.add('ch2_1');

mc2.add('ch2_2');

mc2.add('ch2_3');

mc2.add('ch2_4');

mc2.setMax(3);

document.write(mc2);

и эт)) если чекбоксы дизэйблены, то обратно нельзя убрать отметку с них) предусмотрите это, например какой-нибудь кнопочкой типа сброса) и не юзайте этот код в продакшене

339

29 сентября 2011 года

verybadbug

619 / / 12.09.2005

При использовании jQuery [ATTACH]5366[/ATTACH]
и на всякий случай исходный код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

  <meta name="generator" content="PSPad editor, www.pspad.com">

  <title></title>

  <script src="jquery.js" type="text/javascript"></script>

  <script type="text/javascript">

    //изменение checkbox-а

    function check_change() {

      var div = $(this).parent(), //блок группы checkbox-ов

      max = div.attr('maxchecked'), //максимальное количество отмеченных элементов для блока

      group = div.children(), //группа checkbox-ов

      count = group.filter(':checked').length, //количество отмеченных элементов в группе

      unchecked = group.not(':checked'); //неотмеченные элементы

      if (count >= max) unchecked.attr('disabled', ''); //установка disabled

      else unchecked.removeAttr('disabled'); //снятие disabled

    }

    $(function() {

      $('.checkblock input').change(check_change); //обработчик изменения checkbox-ов

    });

  </script>

  </head>

  <body>

    <div class="checkblock" maxchecked="2">

      <input type="checkbox" name="ch1_1" value="ok"> - 1<br>

      <input type="checkbox" name="ch1_2" value="ok"> - 2<br>

      <input type="checkbox" name="ch1_3" value="ok"> - 3<br>

    </div>

    <div class="checkblock" maxchecked="1">

      <input type="checkbox" name="ch2_1" value="ok"> - 1<br>

      <input type="checkbox" name="ch2_2" value="ok"> - 2<br>

      <input type="checkbox" name="ch2_3" value="ok"> - 3<br>

      <input type="checkbox" name="ch2_4" value="ok"> - 4<br>

    </div>

  </body>

</html>

29 сентября 2011 года

hardcase

4.5K / / 09.08.2005

А теперь, как это реализовать с помощью knockout.
Скрипт:

Код:

var viewModel = {

    ch1_1 : ko.observable(false),

    ch1_2 : ko.observable(false),

    ch1_3 : ko.observable(false),

    ch2_1 : ko.observable(false),

    ch2_2 : ko.observable(false),

    ch2_3 : ko.observable(false),

    ch2_4 : ko.observable(false)

};

viewModel.ch1_canCheckMore = ko.dependentObservable(function() {

    var checkedCount = 0;

    if(viewModel.ch1_1()) ++checkedCount;

    if(viewModel.ch1_2()) ++checkedCount;

    if(viewModel.ch1_3()) ++checkedCount;

    return checkedCount < 2;

}, viewModel);

viewModel.ch2_canCheckMore = ko.dependentObservable(function() {

    var checkedCount = 0;

    if(viewModel.ch2_1()) ++checkedCount;

    if(viewModel.ch2_2()) ++checkedCount;

    if(viewModel.ch2_3()) ++checkedCount;

    if(viewModel.ch2_4()) ++checkedCount;

    return checkedCount < 3;

}, viewModel);

ko.applyBindings(viewModel);

Разметка:

Код:

<input type="checkbox" name="ch1_1" value="ok"

       data-bind="checked: ch1_1,

                  enable: ch1_1() || ch1_canCheckMore()"> - 1<br>

<input type="checkbox" name="ch1_2" value="ok"

       data-bind="checked: ch1_2,

                  enable: ch1_2() || ch1_canCheckMore()"> - 2<br>

<input type="checkbox" name="ch1_3" value="ok" 

       data-bind="checked: ch1_3,

                  enable: ch1_3() || ch1_canCheckMore()"> - 3<br>

<input type="checkbox" name="ch2_1" value="ok" 

       data-bind="checked: ch2_1,

                  enable: ch2_1() || ch2_canCheckMore()"> - 1<br>

<input type="checkbox" name="ch2_2" value="ok" 

       data-bind="checked: ch2_2,

                  enable: ch2_2() || ch2_canCheckMore()"> - 2<br>

<input type="checkbox" name="ch2_3" value="ok" 

       data-bind="checked: ch2_3,

                  enable: ch2_3() || ch2_canCheckMore()"> - 3<br>

<input type="checkbox" name="ch2_4" value="ok" 

       data-bind="checked: ch2_4,

                  enable: ch2_4() || ch2_canCheckMore()"> - 4<br>

Р.S. Код проверить можно тут.