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

我会在每个具有max-answers属性的div中包装每组答案，并在您的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!');
  }
});

Answer 4

$(document).ready(function()
{
    var limit = 5; // define the limit.
    $('#divID').on('change', '.select_max', function(){ // div in which you will be displaying your data.
      if($('.select_max:checked').length >= limit){ // condition to check the limit you specified
      alert('Limit to select your list has exceeded.');
      this.checked = false; // return false if limit exceeded. 
      }
  });
});

动态限制用户可以检查的复选框数量

4 个答案: