0

ラジオボタンのセットがあります：

<input type="radio" name="attending_days" value="06-18-13"/>Tuesday June 18, 2013
<input type="radio" name="attending_days" value="06-18-13"/>Wednesday June 19, 2013
<input type="radio" name="attending_days" value="both_days"/>Both days

チェックボックス:

<div id="checkboxes">
<input type="checkbox" name="checkboxes" value ="1"/>One<br />
<input type="checkbox" name="checkboxes" value ="2"/>Two <br />
<input type="checkbox" name="checkboxes" value ="3"/>Three

など、20個のチェックボックスがあります。

選択されたラジオボタンの値に基づいて、チェックボックスを制限したいと思います。

たとえば、オプションの 1 つまたは 2 つの場合は 4 つ (20 のうち) のチェックボックスのみを選択でき、両方の日 (ラジオ 3) の場合は 8 つのチェックボックスを選択できます。

これにアプローチする方法がわかりません。どんな助けでも大歓迎です。

4

3 に答える 3

2

デモ: http://jsfiddle.net/terryyounghk/xLCzp/

$('input[name=checkboxes]').on('click', function () {
    var lastOneChecked = $('input[name=attending_days]:last:checked').length,
        iLimit = lastOneChecked ? 8 : 4,
        iChecked = $('input[name=checkboxes]:checked').length;

    if (iChecked > iLimit) {
       return false;
    }

    return true; // added so that anonymous function always returns something
});

$('input[name=attending_days]').on('click', function () {
    $('input[name=checkboxes]').prop('checked', false);
});
于 2013-04-22T20:55:38.283 に答える
0

ID または値のグローバル ルックアップ テーブルを作成できます。

var lookup = {}; 

lookup['rdo1'] = ['rdo2','rdo3','rdo4']; 
lookup['rdo2'] = ['rdo5','rdo6','rdo7'];
...and so on...

次に、ラジオボタンがクリックされると、ハンドラーで

// grabs all of the ids from the lookup
var ids = lookup[$(this).attr('id').toString()]

for (var i = 0; i < ids.length; i++) {
    $('#' + ids[i].toString()).addClass('enabledCss');
}
// then loop through the rest of the table and set all of their classes to 'disabledCss' or whatever.

別の方法として、依存 ID をdata-*属性に格納し、そこから取得する方法があります。

<input type="radio" data-dependents="2,3,4,5".../>

次に、 var idStr= $(this).attr('data-dependents'); すべてのスペースを置換してそれらを取得し、それらを配列に分割してから、その配列を使用して適切に有効/無効にすることができます。変数myArr = idStr.split(idStr.replace(' ',''),',');

このコードはあらゆる可能性に拡張する必要がありますが、これが要点です。data-*おそらく最も簡潔な方法です。

注これはラフでテストされていないコードです。正しい方向に向けてもらいたかっただけです。残りは基本的に、私がすでに示したことを何度も繰り返しているため、完全に肉付けする必要があります。

于 2013-04-22T21:01:26.387 に答える