3

重複の可能性:
ページをリロードせずに選択されたチェックボックスの数を数えますか?

ユーザーに希望するパスの種類 (1 ～ 3 日) を尋ね、パスを希望する日を選択するオプションを提供する注文フォームがあります。

現在、3 日を選択すると、私の JQuery は 3 つのチェックボックスをすべて選択し、1 日または 2 日を選択すると選択を解除します。ただし、私がやろうとしていることは次のとおりです。

2 デー パスを選択すると、最大 2 つのチェック ボックスしかオンにできません。1 日パスを選択すると、1 つのチェック ボックスしかオンにできません。

私は自分のvalidateDays()関数で何をする必要があるかについて空白を描いています-この検証を実行するための最良の方法、またはこれが実際に取るべき最良のルートであるかどうか。

私が考えているすべての方法では、チェックボックスに同じ名前/IDが必要です-しかし、フォームの他の部分(省略)のため、残念ながらできません。

アイデア/指針はありますか？

HEAD セクション JavaScript:

<script type="text/javascript">

function validateDays() {
    $('#matthewpeckham').find('input[type="checkbox"]').click(function () {
        var pass = parseInt($('input[name="other_1"]:checked').val(), 10) //1,2,3
        var days = $('#matthewpeckham').find('input[type="checkbox"]:checked').length;
        console.log(days, pass);
        if (days == pass) {
            $('#matthewpeckham').find('input[type="checkbox"]').not(':checked').prop('disabled', true);
        }
        else {
            $('#matthewpeckham').find('input[type="checkbox"]').not(':checked').prop('disabled', false);
        }
    })
    $('input[name="other_1"]').change(function () {
        $('#matthewpeckham').find('input[type="checkbox"]').prop({
            'checked': false,
            'disabled': false
        });
        if (parseInt($(this).val(), 10) == 3) $('#matthewpeckham').find('input[type="checkbox"]').prop({
            'checked': true,
            'disabled': false
        });
    });
}

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

<script type="text/javascript">
$(document).ready(function() {
    jQuery('#3daypass').click(function() {
        jQuery('#other_2 , #other_3 , #other_4').prop('checked', true);
    });
    jQuery('#2daypass , #1daypass').click(function() {
        jQuery('#other_2 , #other_3 , #other_4').prop('checked', false);
    });
});

</script>

本文セクションの HTML:

<input name="other_1" type="radio" value="3daypass" id="3daypass" onClick="validateDays();">
<input name="other_1" type="radio" value="2daypass" id="2daypass" onClick="validateDays();">
<input name="other_1" type="radio" value="1daypass" id="1daypass" onClick="validateDays();">

<input name="other_2" type="checkbox" id="other_2" value="Tues 5 Feb">
<input name="other_3" type="checkbox" id="other_3" value="Wed 6 Feb">
<input name="other_4" type="checkbox" id="other_4" value="Thurs 7 Feb">
4

5 に答える 5

2

検証関数でチェックされているボックスの数をチェックする必要があります。

function validateDays() {
    var numBoxesChecked = $("input:checkbox:checked").length;

    if (document.getElementById("2daypass").checked && numBoxesChecked > 2) {
        // invalid
    }

    if (document.getElementById("1daypass").checked && numBoxesChecked > 1) {
        // invalid
    }
}

javascriptの検証はバイパスできるため、サーバーでも何らかの種類の検証を実行していることを確認してください。

また、ページに関連のないチェックボックスが他にある場合は、セレクターを変更することもできnumBoxesCheckedます。たとえば、コンテナーに制限するなどです。

var numBoxesChecked = $('#someContainer').find("input:checkbox:checked").length;
于 2013-01-22T16:32:45.153 に答える
2

jQuery ソリューションは次のとおりです: jsFiddle の例

$('input[type="checkbox"]').click(function () {
    var pass = parseInt($('input[name="other_1"]:checked').val(), 10) //1,2,3
    var days = $('input[type="checkbox"]:checked').length;
    console.log(days, pass);
    if (days == pass) {
        $('input[type="checkbox"]').not(':checked').prop('disabled', true);
    }
})
$('input[name="other_1"]').change(function () {
    $('input[type="checkbox"]').prop({
        'checked': false,
            'disabled': false
    });
    if (parseInt($(this).val(), 10) == 3) $('input[type="checkbox"]').prop({
        'checked': true,
            'disabled': false
    });
});
于 2013-01-22T16:49:12.257 に答える
1

jQuery は、ここで役立つはずのチェックボックス セレクターを公開します。

あなたのvalidateDays関数は、これらの線に沿って何かをすることができます

var checkedBoxes = jQuery(":checkbox:checked");
var numChecked = checkedBoxes.length;
...
    else if (document.getElementById("2daypass").checked) {
        if (numChecked > 2) { /*do something*/ }
    }
    else if (document.getElementById("1daypass").checked) {
        if (numChecked > 1) { /*do something*/ }
    }
    else {
        // DO NOTHING
    }
...

ただし、ボックスを「元に戻す」際に問題が発生する場合があります。あなたは簡単にできるかもしれません

jQuery(this).prop('checked', false)
于 2013-01-22T16:34:12.337 に答える
0

私は決してこの分野の専門家ではありませんが、これが私のサイトで行っていることです。ニーズに合わせて変更できるはずです...入力に同じクラス名を付けることを忘れないでください。

<script type="text/javascript">
function Check() {
    var count = 0;
    var checkBoxes = document.getElementsByClassName('chkValidation');
    for (var index = 0; index < checkBoxes.length; index++) {
        if (checkBoxes[index].type == 'checkbox') {
            if (!checkBoxes[index].disabled) {
                count = checkBoxes[index].checked ? (count + 1) : count;
            }
        }
    }
    if (count > 3) {
        alert('Question two - please select a maximum of 3 sub questions to ask.');
        return false;
    }
    return true;
}

于 2013-01-22T16:32:27.540 に答える
0

次のような関数を使用して、動的に行うこともできます。 

$('.checkbox').on('click', function(e) {
  var num_checked = 0;

  $('.checkbox').each(function() {
    if ( $(this).prop('checked') ) num_checked++;
  });

  var max_checked = $('input[name="other_1"]:checked').val();

  if ( num_checked > max_checked ) {
    $(this).prop('checked', false);
  }
});

HTML にいくつかの小さな変更を加えると仮定します。

<input name="other_1" type="radio" value="3" id="3daypass">
<input name="other_1" type="radio" value="2" id="2daypass">
<input name="other_1" type="radio" value="1" id="1daypass">

<input class="checkbox" name="other_2" type="checkbox" id="other_2" value="Tues 5 Feb">
<input class="checkbox" name="other_3" type="checkbox" id="other_3" value="Wed 6 Feb">
<input class="checkbox" name="other_4" type="checkbox" id="other_4" value="Thurs 7 Feb">

デモ: http://jsbin.com/osecep/1/

これは完全ではありません。おそらく、日数が変更されたときにチェックボックスをオフにしたいでしょうが、それで正しい軌道に乗るはずです。

于 2013-01-22T16:37:54.450 に答える