jquery проверка checkbox

Dark Wizard · 8 Янв 2018

Пытаюсь сделать ограничения на выбор для чекбоксов, нашёл такой скрипт:

Код:

$('input[type=checkbox]').change(function(){
    if($('input[type=checkbox]:checked').length >= <?=$res['colanswers'];?>){
        $('input[type=checkbox]:not(:checked)').attr('disabled', "disabled");
    } else{
        $('input[type=checkbox]:disabled').removeAttr('disabled');
    }
});

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

Пробовал всякие $('#answer1 input[type=checkbox]') и $('input[name="answer1"]') - не работает.

Wertos · 9 Янв 2018

$("#form_id input:checkbox")
Так должно работать ! Может форма не закрыта ?

borodatych · 9 Янв 2018

HTML:

$("input[type=checkbox]").change(function() {
    if($(this).prop('checked') == true) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

Absolute · 9 Янв 2018

Dark Wizard написал(а):
Пробовал всякие $('#answer1 input[type=checkbox]') и $('input[name="answer1"]') - не работает.

А почему не по классу?

Код:

$('.my_checkbox').change(function(){
    if($('.my_checkbox:checked').length >= <?=$res['colanswers'];?>){
        $('.my_checkbox:not(:checked)').attr('disabled', "disabled");
    } else{
        $('.my_checkbox:disabled').removeAttr('disabled');
    }
});

Dark Wizard · 9 Янв 2018

Absolute написал(а):
А почему не по классу?

не понял, как сделать по классу.

Через #id работает, но криво - переключение в первой форме затрагивает вторую и наоборот. Вот код моей страницы:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>label{cursor:pointer;} .answ { padding-top:4px;}</style>
</head>
<body>

<table class="panel" width="330px"><tr><td align="center" style="font-size:14px;">Голосований без отметок: 2</tr></tr></table><br><br>

<script LANGUAGE="JavaScript" TYPE="text/javascript">
$(document).ready(function(){

$('#pollsform1 input[type=checkbox]').change(function(){
    if($('#pollsform1 input[type=checkbox]:checked').length >= 1){
        $('#pollsform1 input[type=checkbox]:not(:checked)').attr('disabled', "disabled");
    } else{
        $('#pollsform1 input[type=checkbox]:disabled').removeAttr('disabled');
    }
});

});
</script>
<form id="pollsform1" name="pollsform1" action="include/polls_do.php" method="POST">

<table class="panel votetable" style="padding:3px;" width="330px"><tr><td>

  <table width="100%"><tr>
    <td style="line-height:20px;">
  <b>Голосование #1</b><br>
  Сколько ног у слона?
    </td>
  </tr></table>
<hr style="margin-top:5px;">

<table class="radiotable">
  <tr><td><input type="checkbox"  name="answer[0]" id="answer1[0]" value="одна"></td><td class="answ">одна</td></tr>
  <tr><td><input type="checkbox"  name="answer[1]" id="answer1[1]" value="две"></td><td class="answ">две</td></tr>
  <tr><td><input type="checkbox"  name="answer[2]" id="answer1[2]" value="три"></td><td class="answ">три</td></tr>
  <tr><td><input type="checkbox"  name="answer[3]" id="answer1[3]" value="четыре"></td><td class="answ">четыре</td></tr>
  <tr><td><input type="checkbox"  name="answer[4]" id="answer1[4]" value="пять"></td><td class="answ">пять</td></tr>
</table>
<div style="min-width:250px;"><center><input class="but" type="SUBMIT" value="Проголосовать" onclick="" onmouseover="this.className='but buthov'" onmouseout="this.className='but'"></center></div>
</form>
</td></tr></table><br><br>

<script LANGUAGE="JavaScript" TYPE="text/javascript">
$(document).ready(function(){

$('#pollsform5 input[type=checkbox]').change(function(){
    if($('#pollsform5 input[type=checkbox]:checked').length >= 2){
        $('#pollsform5 input[type=checkbox]:not(:checked)').attr('disabled', "disabled");
    } else{
        $('#pollsform5 input[type=checkbox]:disabled').removeAttr('disabled');
    }
});

});
</script>
<form id="pollsform5" name="pollsform5" action="include/polls_do.php" method="POST">
<table class="panel votetable" style="padding:3px;" width="330px"><tr><td>
  <table width="100%"><tr><td style="line-height:20px;">

  <b>Голосование #5</b><br>
  вопросик  </td>
  <td valign="top">


  </td>
  </tr></table>
<hr style="margin-top:5px;">

<table class="radiotable">
  <tr><td><input type="checkbox"  name="answer[0]" id="answer5[0]" value="пуп"></td><td class="answ">пуп</td></tr>
  <tr><td><input type="checkbox"  name="answer[1]" id="answer5[1]" value="туп"></td><td class="answ">туп</td></tr>
  <tr><td><input type="checkbox"  name="answer[2]" id="answer5[2]" value="руп"></td><td class="answ">руп</td></tr>
  <tr><td><input type="checkbox"  name="answer[3]" id="answer5[3]" value="пуд"></td><td class="answ">пуд</td></tr>
</table>
<div style="min-width:250px;"><center><input class="but" type="SUBMIT" value="Проголосовать" onclick="" onmouseover="this.className='but buthov'" onmouseout="this.className='but'"></center></div>
</form>


</td></tr></table><br><br>
</body></html>

Absolute · 9 Янв 2018

Dark Wizard написал(а):
не понял, как сделать по классу.

Задать каждой группе чекбоксов свой класс.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>label{cursor:pointer;} .answ { padding-top:4px;}</style>
</head>
<body>

<table class="panel" width="330px"><tr><td align="center" style="font-size:14px;">Голосований без отметок: 2</tr></tr></table><br><br>

<script LANGUAGE="JavaScript" TYPE="text/javascript">
$(document).ready(function(){

$('.a1').change(function(){
    if($('.a1:checked').length >= 1){
        $('.a1:not(:checked)').attr('disabled', "disabled");
    } else{
        $('.a1:disabled').removeAttr('disabled');
    }
});

});
</script>
<form id="pollsform1" name="pollsform1" action="include/polls_do.php" method="POST">

<table class="panel votetable" style="padding:3px;" width="330px"><tr><td>

  <table width="100%"><tr>
    <td style="line-height:20px;">
  <b>Голосование #1</b><br>
  Сколько ног у слона?
    </td>
  </tr></table>
<hr style="margin-top:5px;">

<table class="radiotable">
  <tr><td><input class="a1" type="checkbox"  name="answer[0]" id="answer1[0]" value="одна"></td><td class="answ">одна</td></tr>
  <tr><td><input class="a1" type="checkbox"  name="answer[1]" id="answer1[1]" value="две"></td><td class="answ">две</td></tr>
  <tr><td><input class="a1" type="checkbox"  name="answer[2]" id="answer1[2]" value="три"></td><td class="answ">три</td></tr>
  <tr><td><input class="a1" type="checkbox"  name="answer[3]" id="answer1[3]" value="четыре"></td><td class="answ">четыре</td></tr>
  <tr><td><input class="a1" type="checkbox"  name="answer[4]" id="answer1[4]" value="пять"></td><td class="answ">пять</td></tr>
</table>
<div style="min-width:250px;"><center><input class="but" type="SUBMIT" value="Проголосовать" onclick="" onmouseover="this.className='but buthov'" onmouseout="this.className='but'"></center></div>
</form>
</td></tr></table><br><br>

<script LANGUAGE="JavaScript" TYPE="text/javascript">
$(document).ready(function(){

$('.a2').change(function(){
    if($('.a2:checked').length >= 2){
        $('.a2:not(:checked)').attr('disabled', "disabled");
    } else{
        $('.a2:disabled').removeAttr('disabled');
    }
});

});
</script>
<form id="pollsform5" name="pollsform5" action="include/polls_do.php" method="POST">
<table class="panel votetable" style="padding:3px;" width="330px"><tr><td>
  <table width="100%"><tr><td style="line-height:20px;">

  <b>Голосование #5</b><br>
  вопросик  </td>
  <td valign="top">


  </td>
  </tr></table>
<hr style="margin-top:5px;">

<table class="radiotable">
  <tr><td><input class="a2" type="checkbox"  name="answer[0]" id="answer5[0]" value="пуп"></td><td class="answ">пуп</td></tr>
  <tr><td><input class="a2"  type="checkbox"  name="answer[1]" id="answer5[1]" value="туп"></td><td class="answ">туп</td></tr>
  <tr><td><input class="a2" type="checkbox"  name="answer[2]" id="answer5[2]" value="руп"></td><td class="answ">руп</td></tr>
  <tr><td><input class="a2" type="checkbox"  name="answer[3]" id="answer5[3]" value="пуд"></td><td class="answ">пуд</td></tr>
</table>
<div style="min-width:250px;"><center><input class="but" type="SUBMIT" value="Проголосовать" onclick="" onmouseover="this.className='but buthov'" onmouseout="this.className='but'"></center></div>
</form>


</td></tr></table><br><br>
</body>
</html>

Dark Wizard · 9 Янв 2018

Absolute написал(а):
Задать каждой группе чекбоксов свой класс

Спасибо! То что надо!

jquery проверка checkbox

Dark Wizard

Гуру форума

Wertos

Пьянь местная

borodatych

Постоялец

Absolute

Крокодил ;)

Dark Wizard

Гуру форума

Absolute

Крокодил ;)

Dark Wizard

Гуру форума