Динамически ограничить количество флажков, которые могут быть проверены пользователем

Question

Я создал тестовую систему и систему ответа. Каждый вопрос может содержать один или несколько ответов, например «Пожалуйста, отметьте 1 ответ», «Пожалуйста, отметьте 3 ответа» и т. Д.

Можно ли ограничить количество флажков, которые пользователь может проверить на основании этого? Если на вопрос требуется 1 ответ, тогда они могут проверять только 1 из флажков.

<?php foreach ($rows as $row){ ?> 
    <input type="checkbox" name="answer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" /> 
    <?php echo $row['answer']; ?> 
<?php } ?> 

Это петли через это и тянет в каждом ответе, количество ответов, необходимых для каждого вопроса является динамическим и управляется этой области (где он может быть 1, 2, 3 и т.д.):

<?php echo $repeater_row['required_answers']; ?> 

---

Использование JQuery ниже, хотя это не является динамическим:

$(document).ready(function() { 
    if ($("input:checkbox:checked").length >= 3) { 
     $("input:checkbox").not(":checked").attr("disabled", 3); 
    } 
    $("input:checkbox").click(function() { 
     var bol = $("input:checkbox:checked").length >= 3; 
     $("input:checkbox").not(":checked").attr("disabled", bol); 
    }); 
}); 

Как с Я делаю это динамически? У каждого вопроса есть ответы, названные в наборах, поэтому в первом вопросе есть набор ответов, названный с их вводом с именем name="answer1[]", второй вопрос имеет набор ответов name="answer2[]" и так далее.

Answer 1

Я бы обернуть каждый набор ответов в DIV с атрибутом A Макс-ответы и использовать этот атрибут значение в вашем javascript.

Вот рабочая скрипку: http://jsfiddle.net/pVA3d/4/

Мой HTML

<div class="question" data-max-answers="2"> 
    Here's a question with up to two answers: <br> 
    <input type="checkbox" name="answer1[]" value="A"> A <br> 
    <input type="checkbox" name="answer1[]" value="B"> B <br> 
    <input type="checkbox" name="answer1[]" value="C"> C <br> 
    <input type="checkbox" name="answer1[]" value="D"> D <br> 
</div> 
<div class="question" data-max-answers="4"> 
    Here's a question with up to 4! <br> 
    <input type="checkbox" name="answer2[]" value="A"> A <br> 
    <input type="checkbox" name="answer2[]" value="B"> B <br> 
    <input type="checkbox" name="answer2[]" value="C"> C <br> 
    <input type="checkbox" name="answer2[]" value="D"> D <br> 
    <input type="checkbox" name="answer2[]" value="E"> E <br> 
    <input type="checkbox" name="answer2[]" value="F"> F <br> 
</div> 

Мой JavaScript

$(document).ready(function() { 
    $("input[type=checkbox]").click(function (e) { 
     if ($(e.currentTarget).closest("div.question").length > 0) { 
      toggleInputs($(e.currentTarget).closest("div.question")[0]);   
     } 
    }); 
}); 

function toggleInputs(questionElement) { 
    if ($(questionElement).data('max-answers') == undefined) { 
     return true; 
    } else { 
     maxAnswers = parseInt($(questionElement).data('max-answers'), 10); 
     if ($(questionElement).find(":checked").length >= maxAnswers) { 
      $(questionElement).find(":not(:checked)").attr("disabled", true); 
     } else { 
      $(questionElement).find("input[type=checkbox]").attr("disabled", false); 
     } 
    } 
} 

Answer 2

Вы можете использовать name свойство с checked, чтобы получить количество флажков, которые проверяются:

$('input:checkbox[name="some_name"]').click(function() { 
    // get count of checked with the same name 
    var name = $(this).attr("name"); 
    var countLength = $(':checkbox[name="' + name + '"]:checked') 

    if(countLength > 3){ 
     // too many checked 
    } 
}); 

Answer 3

Вы должны иметь скрытое поле в вашей форме, например boxnum:

<input type="checkbox" name="answer<?php echo $counter; ?>[]" 
     id="answer<?php echo $counter; ?>[]" 
     value="<?php echo the_sub_field('answer'); ?>" /> 
<input type="hidden" name="boxnum" 
     id="q1boxnum" value="<?php echo $repeater_row['required_answers']; ?>" /> 

Затем, с jQuery,

$("input:checkbox").on('click', function(){ 
    var numboxesallowed =$(#q1boxnum).val(); 

    $("input:checkbox").each(function(){ 
     if($(this).attr('checked', true)){ 
      numboxesallowed = numboxesallowed -1; 
    } 
    if(numboxesallowed < 0) { 
    alert('you checked too many boxes!'); 
    } 
});