動態限制可以通過用戶

Question

我創建了一個測試和答疑係統進行檢查的複選框的量。每個問題可以有一個或多個答案，e.g「請註明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與MAX-答案的屬性和使用屬性值在你的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!'); 
    } 
});