1

テストと応答システムを作成しました。各質問には、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[]"、2 番目の質問には回答セットが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 に答える