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

[sympler]

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

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

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

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

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

 

[1d37r]

дальше времени небыло написать, если никто не ответит до завтра напишу

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[sympler]

уже чтото ))
только нужно учесть что по клику может как check += 1; а может и check -= 1;
если вдруг передумал и решил галочку снять

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

}

 

[1d37r]

вообщем я написал вот это:

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

function takeCheck(num) { // создаем функцию которая и будет выполнять функцию определения сколько всетаки выбрано чекбксов
	if(num == '1') { // ну тут думаю понятно, получаем значение и имя каждого из чекбоксов, если флаг есть то +1, если же нету то -1
		if(document.nulled.one.checked) { sumCheck += 1 }
		else { sumCheck -= 1 }
		}
	if(num == '2') { // и тут тоже самое
		if(document.nulled.two.checked) { sumCheck += 1 }
		else { sumCheck -= 1 }
		}
	if(num == '3') { // и тут тоже самое
		if(document.nulled.three.checked) { sumCheck += 1 }
		else { sumCheck -= 1 }
		}
	if(num == '4') { // и тут тоже самое
		if(document.nulled.four.checked) { sumCheck += 1 }
		else { sumCheck -= 1 }
		} 
	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 после выбора двух одновременно
завтра попробую дописать, если конечно же никто не допишит

 

[sympler]

сделал, все таки сам ))

<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 i = 1; i <= kolvo; i++) 
        {
          var my = 'chek'+ i;
          if (document.getElementById(my).checked == false)
          {
              document.getElementById(my).disabled=true;
          }
        }
      }
      else    // чек не равен 2, надо раздизаблить все чекбоксы!!
      {
        for (var i = 1; i <= kolvo; i++) 
        {
          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>

 

[on3]

А как сделать так что бы, при выборе 2х и больше чекбоксов выбранные заменялись на кнопку button?

 

[lifediz]

ТС, на jquery все намного проще решилось бы.

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

вот пример подсчета кол-ва выбранных чекбоксов с сайта jquery:

<!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>

 

[on3]

Спасибо за вариант.
Но решение выбрал немного иное. Так как у меня эта фитча для выбора товаров для сравнения, в процессе понял что заменять чекбокс на бутон не правильно, потому что сделать действие обратно, не возможно, если был выбран не тот чекбокс.
По этому сделал, по умолчанию кнопку сравнить скрытую, а если выбрано 2 и больше чекбокса, то она появляется и плавает всегда по центру по вертикали.
А скрипт вот такой вышел на jQuery:

$(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');
}
});
});