Checkbox необходимо дать возможность выбрать только один или два варианта

Тема в разделе "Веб-дизайн", создана пользователем sympler, 3 июн 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. sympler

    sympler Постоялец

    Регистр.:
    24 окт 2008
    Сообщения:
    131
    Симпатии:
    6
    есть форма с десятью чекбоксами, необходимо давать возможность поставить только две галочки, то есть выбрать можно только один или два варианта ответа, после того как поставили вторую галочку все остальные чекбоксы как бы деактивируются ))
    на php это легко, но крайне неудобно, поэтому нужно решение на яваскрипте.

    ps логику вижу такую: есть счетчик выбранных чекбоксов, как только отметили второй чекбокс блокировать не выбранные чекбоксы
    ниже пример логики, осталось довести до кондиции:
    PHP:

       
    // сначала счетчик отмеченных чекбоксов
      
    var number = .........

       
    // как только number >=2 ставим всем остальным чекбоксам "disabled" (думаю выборку по классу, то есть у всех чекбоксов будет один класс
         
    .......
        

       
    // как только number <2 убираем "disabled"
        
    ........


     
  2. 1d37r

    1d37r Читатель

    Заблокирован
    Регистр.:
    16 сен 2007
    Сообщения:
    288
    Симпатии:
    48
    дальше времени небыло написать, если никто не ответит до завтра напишу :(
    PHP:
    <script language="javascript">
    <!--
    var 
    check 0;

    function 
    checkCheck() {
        
    check += 1;
        if (
    check == 2) {
            
    alert(check);
        }
    }

    //-->
    </script>
    <input type="checkbox" value="1" id="chek" onclick="checkCheck()" />a<br>
    <input type="checkbox" value="2" id="chek" onclick="checkCheck()" />b<br>
    <input type="checkbox" value="5" id="chek" onclick="checkCheck()" disabled="disabled"/>c<br>
    <input type="checkbox" value="4" id="chek" onclick="checkCheck()" />d<br>
     
    sympler нравится это.
  3. sympler

    sympler Постоялец

    Регистр.:
    24 окт 2008
    Сообщения:
    131
    Симпатии:
    6
    уже чтото ))
    только нужно учесть что по клику может как check += 1; а может и check -= 1;
    если вдруг передумал и решил галочку снять

    ну и потом вклеить если check ==2
    if(check==2)
    {
    if (document.......checked==true)
    document.......disabled=false
    else
    document.......disabled=true

    }
     
  4. 1d37r

    1d37r Читатель

    Заблокирован
    Регистр.:
    16 сен 2007
    Сообщения:
    288
    Симпатии:
    48
    вообщем я написал вот это:
    PHP:

    <script language="javascript">
    <!--
    var 
    sumCheck 0// определяем переменную, и устанавливаем ей значение ноль. эта переменная будет отвечать за количество выбранных чекбоксов
    var disCheck ""// просто переменная :(

    function takeCheck(num) { // создаем функцию которая и будет выполнять функцию определения сколько всетаки выбрано чекбксов
        
    if(num == '1') { // ну тут думаю понятно, получаем значение и имя каждого из чекбоксов, если флаг есть то +1, если же нету то -1
            
    if(document.nulled.one.checked) { sumCheck += }
            else { 
    sumCheck -= }
            }
        if(
    num == '2') { // и тут тоже самое
            
    if(document.nulled.two.checked) { sumCheck += }
            else { 
    sumCheck -= }
            }
        if(
    num == '3') { // и тут тоже самое
            
    if(document.nulled.three.checked) { sumCheck += }
            else { 
    sumCheck -= }
            }
        if(
    num == '4') { // и тут тоже самое
            
    if(document.nulled.four.checked) { sumCheck += }
            else { 
    sumCheck -= }
            } 
        if(
    sumCheck == 2) { // если всетаки кто-то и выбрал больше двух чекбоксов, то...
            
    disCheck "disabled"// то присваиваем переменной disCheck значение дизаблед! уж она то должна прикатить это безобразие
            
    alert(disCheck)
        }
    }
    //-->
    </script>
    <form action="" method="post" name="nulled">
    <script language="javascript">
    <!--
    document.write("<input name='one' type='checkbox' onClick='takeCheck(1)'>1<br><input name='two' type='checkbox' onClick='takeCheck(2)'>2<br><input name='three' type='checkbox' onClick='takeCheck(3)'>3<br><input name='four' type='checkbox' onClick='takeCheck(4)' "+ disCheck +">4"); 
    // но не тут то было :( 
    //-->
    </script>
    </form>
    и понял :( спустя пару часов что глупый document.write не поддерживает динамики, по этому ничего обновляться то и не будет, и тут меня озарило лучом солнца пробивающегося сквозь облака и пыльное окно, что нужно смотреть в сторону innerHTML, и глаза бегло окинули взглядом циферблат часов, и с чувством незавершенного долга, я медленно и нехотя покинул сначала телом, а потом и мысленно рабочий стол с компьютером и незаконченный код отключения checkbox после выбора двух одновременно :(
    завтра попробую дописать, если конечно же никто не допишит :)
     
  5. sympler

    sympler Постоялец

    Регистр.:
    24 окт 2008
    Сообщения:
    131
    Симпатии:
    6
    сделал, все таки сам ))
    PHP:
    <script language="javascript">
    <!--
    var 
    check 0;
    var 
    kolvo 10// количество чекбоксов  в нашей форме
    function checkCheck(elem
    {
         
    // если ставим галочку +1, если убираем галочку с чекбокса -1 
        
    if (elem.checked
        {
           
    check += 1
        }
        else
        {
           
    check -= 1
        }
          if (
    check == '2')    //   чек больше или равен 2, надо дизаблить все НЕ отмеченные!!
          
    {
            for (var 
    1<= kolvoi++) 
            {
              var 
    my 'chek'i;
              if (
    document.getElementById(my).checked == false)
              {
                  
    document.getElementById(my).disabled=true;
              }
            }
          }
          else    
    // чек не равен 2, надо раздизаблить все чекбоксы!!
          
    {
            for (var 
    1<= kolvoi++) 
            {
              var 
    my 'chek'i;
              
    document.getElementById(my).disabled=false;
            } 
          }   
    }
    //-->
    </script>
    <form action="/" method="POST" name="test">
    <input type="checkbox" value="1" id="chek1" onclick="checkCheck(this)" name="var1" />1<br>
    <input type="checkbox" value="2" id="chek2" onclick="checkCheck(this)" name="var2" />2<br>
    <input type="checkbox" value="3" id="chek3" onclick="checkCheck(this)" name="var3" />3<br>
    <input type="checkbox" value="4" id="chek4" onclick="checkCheck(this)" name="var4" />4<br>
    <input type="checkbox" value="5" id="chek5" onclick="checkCheck(this)" name="var5" />5<br>
    <input type="checkbox" value="6" id="chek6" onclick="checkCheck(this)" name="var6" />6<br>
    <input type="checkbox" value="7" id="chek7" onclick="checkCheck(this)" name="var7" />7<br>
    <input type="checkbox" value="8" id="chek8" onclick="checkCheck(this)" name="var8" />8<br> 
    <input type="checkbox" value="9" id="chek9" onclick="checkCheck(this)" name="var9" />9<br>
    <input type="checkbox" value="10" id="chek10" onclick="checkCheck(this)" name="var10" />10<br>
    <input type="submit" value="Проголосовать"  name="opros" /><br>
    </form>
     
    1d37r нравится это.
  6. on3

    on3 Создатель

    Регистр.:
    14 май 2009
    Сообщения:
    17
    Симпатии:
    2
    А как сделать так что бы, при выборе 2х и больше чекбоксов выбранные заменялись на кнопку button?
     
  7. lifediz

    lifediz Yii Framework developer

    Регистр.:
    7 июн 2008
    Сообщения:
    385
    Симпатии:
    507
    ТС, на jquery все намного проще решилось бы.

    on3, опять же, в jquery делаем селект чекнутых чекбоксов, проверяем количество, если больше 2х то меняем тип инпута.

    вот пример подсчета кол-ва выбранных чекбоксов с сайта jquery:
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { color:red; }
      </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      
    <form>
      <p>
        <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
    
        <input type="checkbox" name="newsletter" value="Daily" />
        <input type="checkbox" name="newsletter" value="Weekly" />
    
        <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
        <input type="checkbox" name="newsletter" value="Yearly" />
      </p>
    </form>
    <div></div>
    
    <script>
    function countChecked() {
      var n = $("input:checked").length;
      $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
    }
    countChecked();
    $(":checkbox").click(countChecked);
    </script>
    
    </body>
    </html>
     
    mdss нравится это.
  8. on3

    on3 Создатель

    Регистр.:
    14 май 2009
    Сообщения:
    17
    Симпатии:
    2
    Спасибо за вариант.
    Но решение выбрал немного иное. Так как у меня эта фитча для выбора товаров для сравнения, в процессе понял что заменять чекбокс на бутон не правильно, потому что сделать действие обратно, не возможно, если был выбран не тот чекбокс.
    По этому сделал, по умолчанию кнопку сравнить скрытую, а если выбрано 2 и больше чекбокса, то она появляется и плавает всегда по центру по вертикали.
    А скрипт вот такой вышел на jQuery:
    HTML:
    $(document).ready(function(){
    $('#fixed').hide();
    $('#tovar .ctrl_products_cmp').change(function(){
    var checkbuttons = 0;
    $('#tovar .ctrl_products_cmp').each(function(){
    if ($(this).is(':checked')) {
    checkbuttons++;
    }
    });
    if (checkbuttons >= 2) {
    $('#fixed').fadeIn('600');
    } else {
    $('#fixed').fadeOut('600');
    }
    });
    });
     
Статус темы:
Закрыта.