0

チェックされたラジオボタンの値に基づいて、実行できるチェックの数をチェックボックスのセットに制限するにはどうすればよいですか。

3つのオプションのラジオボタンがあるとします。

Option 1 with value of 1 
Option 2 with value of 2
Option 3 with value of 3

次に、3つのチェックボックスがあります。

Checkbox 1
Checkbox 2
Checkbox 3

デフォルトでは、チェックボックスはラジオボタンがチェックされていない状態で無効になっています。オプション1のラジオボタンをオンにした場合-すべてのチェックボックスが有効になり、3つのうち1つだけを選択する必要がありますオプション2のラジオボタンをオンにした場合-すべてのチェックボックスが有効になり、3つのうち2つを選択する必要がありますオプションをオンにした場合3ラジオボタン-すべてのチェックボックスが有効になっているため、すべてのチェックボックスを選択する必要があります。

JSFiddleを使い始めたものがありますが、Javascriptがあまり得意ではなく、助けが必要です。

更新： http： //jsfiddle.net/wF38X/

<div id="radioButtons">
    <input type="radio" name="quantity" id="radio1">
    <input type="radio" name="quantity" id="radio2">
    <input type="radio" name="quantity" id="radio3">
</div><!-- radioButtons -->
<hr />
<div id="checkBoxes">
    <input type="checkbox" name="color">
    <input type="checkbox" name="color">
    <input type="checkbox" name="color">
</div><!-- checkBoxes -->​
4

1 に答える 1

1

これはあなたが必要とすることをするはずです。ラジオの値を使用する代わりに、ラジオのインデックスを使用して、どのチェックボックスを無効にしてチェックを外す必要があるかを判断します。

var $radios = $('#radioButtons input:radio');
var $checks = $('#checkBoxes input:checkbox').prop('disabled', true);

$radios.change(function() {
    var idx = $radios.index(this);
    $checks.prop('disabled', function(index) {
        return index > idx;
    }).filter(':gt('+idx+')').prop('checked',false);

});

/* validate all non disabled checkboxes are checked*/
$('button').click(function() {
    var missingChecks = $checks.filter(function() {
        return !this.checked && !$(this).prop('disabled');
    }).length;

    if (missingChecks) {
        alert('Not all checkboxes selected')
    }    
});

デモ: http://jsfiddle.net/C6SpM/18/

于 2012-11-14T00:49:19.663 に答える