Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Как установить ограничение на количество чекбоксов.
 
 автор: TanTaL91   (16.02.2010 в 16:42)   письмо автору
 
 

Добрый день уважаемые форумчане.

У меня есть форма reg. Мне нужно что бы человек из кучи чекбоксов мог выбрать только 3.

И при этом имя у чекбоксов должно быть массивом. так что надо ограничить по классам или еще каким то параметрам.

Помогите пожалуйста.

  Ответить  
 
 автор: DJ Paltus   (16.02.2010 в 17:44)   письмо автору
 
   для: TanTaL91   (16.02.2010 в 16:42)
 

Решение не изящное, навскидку и напролом. "Для бедных". С использованием jQuery.

<script type="text/javascript">
$(document).ready(function() {
    var cnt = 0;
    $("#content > input:checkbox:checked").each(function(){
        cnt++;
    })
    var allCheckboxes = $("#content input:checkbox");
    $("#content > input").change(function(){
                if(this.checked) {cnt++;}
                else{cnt -= 1 ;}
                if(cnt >= 3){
                    var notChecked = allCheckboxes.not(':checked');
                    $("#content > input:checkbox:checked").each(function(){
                        $(notChecked).attr('disabled',true);
                    })
                    }
                else{
                    $("#content > input:checkbox:checked").each(function(){
                        $(allCheckboxes).attr('disabled',false);
                    })
                }

          $("#images").text(cnt);
        })

});
</script>
<div id=content>
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
            <input name="cb[]" type="checkbox">
        </div>

  Ответить  
 
 автор: sim5   (16.02.2010 в 18:25)   письмо автору
 
   для: DJ Paltus   (16.02.2010 в 17:44)
 

С jquery можно проще:
<script>
$(document).ready(function() {
  $(":checkbox").click(function() {
    if($(":checked").length>3) this.checked = false;
  });
});
</script>

  Ответить  
 
 автор: TanTaL91   (18.02.2010 в 08:38)   письмо автору
 
   для: sim5   (16.02.2010 в 18:25)
 

Спасибо вам за предложеные вами решения. Оба хороши. Но остановлюсь на первом варианте, уж больно клево:) Еще раз спасибо огромное, очень помогли.

  Ответить  
 
 автор: sim5   (18.02.2010 в 08:46)   письмо автору
 
   для: TanTaL91   (18.02.2010 в 08:38)
 

Первый вариант даже без jquery можно сократить до бессовестного, а уж с использованием.... Но коли вы выбираете не по оптимизации, а по клевости - да заради бога )

  Ответить  
 
 автор: DJ Paltus   (18.02.2010 в 09:56)   письмо автору
 
   для: sim5   (18.02.2010 в 08:46)
 

именно этим мы, индусы, отличаемся от программистов. Нам надо клёво, а не правильно )

  Ответить  
 
 автор: sim5   (18.02.2010 в 09:59)   письмо автору
 
   для: DJ Paltus   (18.02.2010 в 09:56)
 

Ну-ну...

  Ответить  
 
 автор: TanTaL91   (18.02.2010 в 10:09)   письмо автору
 
   для: sim5   (18.02.2010 в 09:59)
 

Надо не забывать, о юзабилити, а лишние 5 строк роли не сыграют.

Только вот начал тестить, и библиотека jq заблокировала некоторые другие скрипты.

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

  Ответить  
 
 автор: sim5   (18.02.2010 в 10:19)   письмо автору
 
   для: TanTaL91   (18.02.2010 в 10:09)
 

Не надо путать юзабилити с излишним, JQuery как раз и делает за вас очень многое, позволяя сосредоточиться на главном, а подключать такую библиотеку и колбасить под ней лишнее....

JQuery не блокирует ничего, просто вы можете использовать другие библиотеки (скрипты), используя в вызовах $, вот это и может вызывать проблему. Чтобы это устранить, нужно обращаться к объектам без использования $, как
jQuery("div p").hide();
либо
var j = jQuery.noConflict();
// и далее
j("div p").hide();

Без библиотеки - нужно пройтись в цикле по чекбоксам, проверив их состояния, ну и далее запретить выбор - сбросить выбранный.

  Ответить  
 
 автор: АЯ   (18.02.2010 в 11:18)   письмо автору
 
   для: TanTaL91   (18.02.2010 в 10:09)
 

<script>
var Cont = 0;
function mFunc (x, y)
{
var e = x || window.event, o = e.target || e.srcElement; with (o)
var s = (tagName == 'INPUT' && type == 'checkbox' && name == 'cb[]'); if (s) {Cont += 2 * o.checked - 1;
for (var j = 0, p = y.getElementsByTagName ('INPUT'); j < p.length; j++) with (p [j])
if (type == 'checkbox' && name == 'cb[]') disabled = !(Cont - checked - 3)}
}
</script>

<div id="content" onclick="mFunc (event, this)">
   <input name="cb[]" type="checkbox">
   <input name="cb[]" type="checkbox">
   <input name="cb[]" type="checkbox">
   <input name="cb[]" type="checkbox">
   <input name="cb[]" type="checkbox">
   <input name="cb[]" type="checkbox">
   <input name="cb[]" type="checkbox">
   <input name="cb[]" type="checkbox">
</div>

  Ответить  
 
 автор: TanTaL91   (18.02.2010 в 14:36)   письмо автору
 
   для: АЯ   (18.02.2010 в 11:18)
 

Вот это решение выше всех похвал. И не предется подкгружать библиотеку, -64кб... Ура товарищи:) Спасибо огромное.

  Ответить  
 
 автор: psychomc   (24.02.2010 в 17:23)   письмо автору
 
   для: TanTaL91   (18.02.2010 в 14:36)
 

-

  Ответить  
 
 автор: Leshii   (04.06.2014 в 18:21)   письмо автору
 
   для: АЯ   (18.02.2010 в 11:18)
 

Хорошее решение! Есть только еще одна идея. Сейчас после выбора 3ех элементов чтобы выбрать другой элемент надо снять чек с предыдущего. Не подскажите как сделать так чтобы можно было выбрать только 3 элемента, но при клике на четвертый отметка с третьего снималась и устанавливалась на 4ом?

  Ответить  
 
 автор: Deed   (04.06.2014 в 19:05)   письмо автору
 
   для: Leshii   (04.06.2014 в 18:21)
 

http://jsbin.com/bovaf/1/edit?html,js,output

$(document).ready(function() {
  var last_chb,pre_last_chb='';
  $(':checkbox').click(function() {
    if(pre_last_chb===''){
      last_chb=pre_last_chb=$(this).index();
    }
    else{
      pre_last_chb=last_chb;
      last_chb=$(this).index();
    }
    if($(':checked').length>3){
      $(':checkbox').eq(pre_last_chb).attr('checked', false);
    }
  });
}); 

  Ответить  
 
 автор: Leshii   (04.06.2014 в 22:30)   письмо автору
 
   для: Deed   (04.06.2014 в 19:05)
 

Спасибо большое! Работает как надо если стоят только инпуты, однако добавляем что - то между ними и работать прекращает (я пробовал лейблы добавить и обернуть в див).=(

  Ответить  
 
 автор: Deed   (05.06.2014 в 08:20)   письмо автору
 
   для: Leshii   (04.06.2014 в 22:30)
 

И как теперь выглядит код?

  Ответить  
 
 автор: Leshii   (05.06.2014 в 10:33)   письмо автору
 
   для: Deed   (05.06.2014 в 08:20)
 

Как вариант:

<div id="content"> 
<div class="sh"> <input name="cb[]" id="check1" type="checkbox"> <label for="is_html1"></label> </div> 
<div class="sh"> <input name="cb[]" id="check2" type="checkbox"> <label for="is_html2"></label> </div>  
<div class="sh"> <input name="cb[]" id="check3" type="checkbox">  <label for="is_html3"></label></div> 
<div class="sh"> <input name="cb[]" id="check4" type="checkbox">  <label for="is_html4"></label></div> 
<div class="sh"> <input name="cb[]" id="check5" type="checkbox">  <label for="is_html5"></label></div> 
<div class="sh"> <input name="cb[]" id="check6" type="checkbox">  <label for="is_html6"></label></div> 
<div class="sh"> <input name="cb[]" id="check7" type="checkbox">  <label for="is_html7></label> </div>  
<div class="sh"> <input name="cb[]" id="check8" type="checkbox">  <label for="is_html8"></label></div> 
</div>

  Ответить  
 
 автор: Deed   (05.06.2014 в 11:37)   письмо автору
 
   для: Leshii   (05.06.2014 в 10:33)
 

http://jsbin.com/cemuzu/1/edit?html,js,output

$(document).ready(function() {
  var last_chb,pre_last_chb='';
  $('#content :checkbox').click(function() {
    var pdi = $(this).parent('div').index();
    if(pre_last_chb===''){
      last_chb=pre_last_chb=pdi;
    }
    else{
      pre_last_chb=last_chb;
      last_chb=pdi;
    }
    if($('.sh>:checked').length>3){
      $('.sh').eq(pre_last_chb).find(':checkbox').attr('checked', false);
    }
  });
}); 


P.S. Атрибут "for" тега "label" должен быть таким же, как атрибут "id" тега "input", которому этот label передает клик.

  Ответить  
 
 автор: Leshii   (05.06.2014 в 12:31)   письмо автору
 
   для: Deed   (05.06.2014 в 11:37)
 

Да, с атрибутом чтот ошибся))
Воу! Супер! Ты гений) Спасибо огромнейшее!

  Ответить  
 
 автор: Leshii   (06.06.2014 в 17:24)   письмо автору
 
   для: Deed   (05.06.2014 в 11:37)
 

Хмм...попробовал развить - вживил в калькулятор, добавил значения value. Что получается: допустим мы складываем выбранные значения чекбоксов. Тогда при выборе четвертого значение третьего не стирается, а суммируется к четвертому(

  Ответить  
 
 автор: linoxru   (04.04.2016 в 15:51)   письмо автору
 
   для: Deed   (05.06.2014 в 11:37)
 

А если input выводится в многоуровневом списке ul, можно заставить скрипт работать ?

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования