1

タイトルはおそらく少しあいまいです。それでは説明させてください。

ユーザーが予約を希望する日を選択できるページがあります。ただし、最初の選択肢がいっぱいになった場合に備えて、この日は複数の選択肢を提供します

ラジオ ボタンの HTML:

<input type="radio" class="my-radio" value="monday" name="my_form[day][choice1][]"
id="monday1"/>
<label for="monday1">Monday</label>

<input type="radio" class="my-radio" value="tuesday" name="my_form[day][choice1][]"
id="tuesday1"/>
<label for="tuesday1">Tuesday</label>

<input type="radio" class="my-radio" value="wednesday" name="my_form[day][choice1][]"
id="wednesday1"/>
<label for="wednesday1">Wednesday</label>

<input type="radio" class="my-radio" value="thursday" name="my_form[day][choice1][]"
id="thursday1"/>
<label for="thursday1">Thursday</label>

<input type="radio" class="my-radio" value="friday" name="my_form[day][choice1][]"
id="friday1"/>
<label for="friday1">Friday</label>

<input type="radio" class="my-radio" value="saturday" name="my_form[day][choice1][]"
id="saturday1"/>
<label for="saturday1">Saturday</label>

これがさらに2回繰り返されます。ただし、ID が変更され、名前も変更されます。したがって、2 番目の場合は (月曜日の場合); id=monday2、name=my_form[day][choice2][] など。

それを明確にするために。3 行のラジオ、すべて同じ値ですが、ID と名前が異なります。

月曜日がチェックされると、どの行でも問題ありません。他のすべての月曜日を無効にしたいと思います。代わりに火曜日を選択すると、すべての月曜日が再び有効になります。

jQuery を使用した最初の部分。

jQuery('.my-radio').change(function () {
// Get all elements associated to value, but the currently selected radio.
var associates = jQuery('.my-radio[value="' + jQuery(this).val() + '"]').not("#" + jQuery(this).attr('id'));

  // Disable every element that we found
  jQuery(associates).each(function(){
     jQuery(this).prop('disabled', true);
  });
});

今、私の唯一の問題は2番目の部分です。以前に無効にした無線を再度有効にします。

もう少し明確にするための JSFiddle; http://jsfiddle.net/Hr9h2/1/

編集：答えてくれてありがとう。

ただし、たとえば、月曜日を 3 回または 2 回選択することはできません。

4

4 に答える 4

0

簡単だと思います..特定のラジオボタンを無効にする前に、そのイベントですべてのラジオボタンを有効にするだけです。change

JSはこちら

jQuery('.my-radio').change(function () {
    jQuery('.my-radio').prop('disabled', false); //<---here
    // Disable all elements associated to value
    var associates = jQuery('.my-radio[value="' + jQuery(this).val() + '"]').not("#" + jQuery(this).attr('id'));
    associates.prop('disabled', true);
});

ノート：

eachすべてのアソシエートを取得するためにループを使用する必要はありません。associate変数にはすでにすべての要素が含まれています。そして、ここにfiddle at jsFiddle.net

于 2013-08-03T19:33:18.157 に答える