1

我创建了一个测试和回答系统。每个问题可以有一个或多个答案，例如“请标记 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[]"，依此类推。

4

4 回答 4

4

我会将每组答案包装在一个带有 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);
        }
    }
}
于 2013-04-02T16:33:27.377 回答
1

您可以使用该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
    }
});
于 2013-04-02T16:29:58.683 回答
1

您的表单中应该有一个隐藏字段，例如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!');
  }
});
于 2013-04-02T16:35:06.433 回答
1 
$(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. 
      }
  });
});
于 2019-05-28T09:21:34.893 回答