|
|
|
| Добрый день уважаемые форумчане.
У меня есть форма reg. Мне нужно что бы человек из кучи чекбоксов мог выбрать только 3.
И при этом имя у чекбоксов должно быть массивом. так что надо ограничить по классам или еще каким то параметрам.
Помогите пожалуйста. | |
|
|
|
|
|
|
|
для: 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>
|
| |
|
|
|
|
|
|
|
для: DJ Paltus
(16.02.2010 в 17:44)
| | С jquery можно проще:
<script>
$(document).ready(function() {
$(":checkbox").click(function() {
if($(":checked").length>3) this.checked = false;
});
});
</script>
|
| |
|
|
|
|
|
|
|
для: sim5
(16.02.2010 в 18:25)
| | Спасибо вам за предложеные вами решения. Оба хороши. Но остановлюсь на первом варианте, уж больно клево:) Еще раз спасибо огромное, очень помогли. | |
|
|
|
|
|
|
|
для: TanTaL91
(18.02.2010 в 08:38)
| | Первый вариант даже без jquery можно сократить до бессовестного, а уж с использованием.... Но коли вы выбираете не по оптимизации, а по клевости - да заради бога ) | |
|
|
|
|
|
|
|
для: sim5
(18.02.2010 в 08:46)
| | именно этим мы, индусы, отличаемся от программистов. Нам надо клёво, а не правильно ) | |
|
|
|
|
|
|
|
для: DJ Paltus
(18.02.2010 в 09:56)
| | Ну-ну... | |
|
|
|
|
|
|
|
для: sim5
(18.02.2010 в 09:59)
| | Надо не забывать, о юзабилити, а лишние 5 строк роли не сыграют.
Только вот начал тестить, и библиотека jq заблокировала некоторые другие скрипты.
Sim5 если вас не затруднит, могли бы подсказать как сделать без это библиотеки или на муутулз? | |
|
|
|
|
|
|
|
для: TanTaL91
(18.02.2010 в 10:09)
| | Не надо путать юзабилити с излишним, JQuery как раз и делает за вас очень многое, позволяя сосредоточиться на главном, а подключать такую библиотеку и колбасить под ней лишнее....
JQuery не блокирует ничего, просто вы можете использовать другие библиотеки (скрипты), используя в вызовах $, вот это и может вызывать проблему. Чтобы это устранить, нужно обращаться к объектам без использования $, как
jQuery("div p").hide();
либо
var j = jQuery.noConflict();
// и далее
j("div p").hide();
Без библиотеки - нужно пройтись в цикле по чекбоксам, проверив их состояния, ну и далее запретить выбор - сбросить выбранный. | |
|
|
|
|
|
|
|
для: 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>
|
| |
|
|
|
|
|
|
|
для: АЯ
(18.02.2010 в 11:18)
| | Вот это решение выше всех похвал. И не предется подкгружать библиотеку, -64кб... Ура товарищи:) Спасибо огромное. | |
|
|
|
|
|
|
|
для: TanTaL91
(18.02.2010 в 14:36)
| | - | |
|
|
|
|
|
|
|
для: АЯ
(18.02.2010 в 11:18)
| | Хорошее решение! Есть только еще одна идея. Сейчас после выбора 3ех элементов чтобы выбрать другой элемент надо снять чек с предыдущего. Не подскажите как сделать так чтобы можно было выбрать только 3 элемента, но при клике на четвертый отметка с третьего снималась и устанавливалась на 4ом? | |
|
|
|
|
|
|
|
для: 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);
}
});
});
|
| |
|
|
|
|
|
|
|
для: Deed
(04.06.2014 в 19:05)
| | Спасибо большое! Работает как надо если стоят только инпуты, однако добавляем что - то между ними и работать прекращает (я пробовал лейблы добавить и обернуть в див).=( | |
|
|
|
|
|
|
|
для: Leshii
(04.06.2014 в 22:30)
| | И как теперь выглядит код? | |
|
|
|
|
|
|
|
для: 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>
|
| |
|
|
|
|
|
|
|
для: 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 передает клик. | |
|
|
|
|
|
|
|
для: Deed
(05.06.2014 в 11:37)
| | Да, с атрибутом чтот ошибся))
Воу! Супер! Ты гений) Спасибо огромнейшее! | |
|
|
|
|
|
|
|
для: Deed
(05.06.2014 в 11:37)
| | Хмм...попробовал развить - вживил в калькулятор, добавил значения value. Что получается: допустим мы складываем выбранные значения чекбоксов. Тогда при выборе четвертого значение третьего не стирается, а суммируется к четвертому( | |
|
|
|
|
|
|
|
для: Deed
(05.06.2014 в 11:37)
| | А если input выводится в многоуровневом списке ul, можно заставить скрипт работать ? | |
|
|
|