5

ビジネスロジックに従って現在選択されているラジオボタンに応じて、ラジオボタンのみを有効にするjQueryを作成しようとしています。

基本的に、3 つのラジオ ボタンからなる 3 つのグループがあり、最終的には次のようになります (この例の HTML は冗長で申し訳ありませんが、これが私の言いたいことを示してくれることを願っています)。

<p>
  <label for="group_one">Group One</label>
</p>
<p>
  <div class="group_one">
    <div id="group_one_choice_one">
      <label for="group_one_choice_one">Choice One</label>
      <br />
      <input checked="checked" id="choice_one" type="radio" value="1" />
      <br />
    </div>
    <div id="group_one_choice_two">
      <label for="group_one_choice_two">Choice Two</label>
      <br />
      <input id="group_one_choice_two" type="radio" value="2" />
      <br />
    </div>
    <div id="group_one_choice_three">
      <label for="group_one_choice_three">Choice Three</label>
      <br />
      <input id="choice_three" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>
<p>
  <label for="group_two">Group Two</label>
</p>
<p>
  <div class="group_two">
    <div id="group_two_choice_one">
      <label for="group_two_choice_one">Choice One</label>
      <br />
      <input checked="checked" id="choice_one" type="radio" value="1" />
      <br />
    </div>
    <div id="group_two_choice_two">
      <label for="group_two_choice_two">Choice Two</label>
      <br />
      <input id="group_two_choice_two" type="radio" value="2" />
      <br />
    </div>
    <div id="group_two_choice_three">
      <label for="group_two_choice_three">Choice Three</label>
      <br />
      <input id="choice_three" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>
<p>
  <label for="group_three">Group Three</label>
</p>
<p>
  <div class="group_three">
    <div id="group_three_choice_one">
      <label for="group_three_choice_one">Choice One</label>
      <br />
      <input checked="checked" id="choice_one" type="radio" value="1" />
      <br />
    </div>
    <div id="group_three_choice_two">
      <label for="group_three_choice_two">Choice Two</label>
      <br />
      <input id="group_three_choice_two" type="radio" value="2" />
      <br />
    </div>
    <div id="group_three_choice_three">
      <label for="group_three_choice_three">Choice Three</label>
      <br />
      <input id="choice_three" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>

難しいのは、表示するラジオ ボタンと有効にするラジオ ボタンを決定するために必要なロジックです。ユーザーは各グループから 1 つの選択肢を選択する必要がありますが、あるグループから別のグループに同じ選択肢を繰り返すことはできません。

理想的には、ユーザーがページにアクセスしたときに、すべてのラジオ ボタンが使用可能でありながら選択されていない状態です。

ユーザーが最初に (たとえば) グループ 3 で選択肢 2 を選択した場合、スクリプトはグループ 1 とグループ 2 の両方で選択肢 2 を無効にする必要があります。次に、ユーザーがグループ 2 の選択肢 3 を選択した場合、グループ 1 の選択肢 1 のみを有効にする必要があります。

どんな助けでも大歓迎です。この問題を解決するために書き込もうとしていた jQuery を投稿しますが、これについてはうまく行っていないと思います。ありがとう！

4

5 に答える 5

8

特別授業はやめます。

$("input[type=radio]").click(function() { 
  $("input[type=radio][value=" + $(this).val() + "]").attr("disabled", "disabled"); 
  $(this).removeAttr("disabled"); 
});

要件によっては、最後の行が必要ない場合があります。現在の無線を再度有効にするだけです。HTML には、ラジオ ボタンの名前もありません。

于 2009-08-23T15:44:33.797 に答える
3

次のようなものを使用できるかもしれません（私はこれをテストしていません。ボールを転がすためだけです...）

アイデアは次のとおりです。ラジオをクリックするたびに、クリックしたばかりのものを除いて、その値を持つすべてのグループのすべてのラジオを無効にします。

$(document).ready(function() {
    $("input[type=radio]").click(function() {
        var val = $(this).val();
        var $all_radios = $("input[type=radio]").filter("[value=" + val + "]");
        $all_radios.not($(this)).attr('disabled', 'disabled');
        return true;
    });
});
于 2009-08-23T15:38:57.867 に答える
3

完了してテストされたjQueryは次のとおりです。

$(document).ready(function() {
    $('input:radio').click(function() {
       //reset all the radios
       $('input:radio').removeAttr('disabled');
       if($(this).is(':checked')) {
           var val = $(this).val();
           //disable all the ones with the same value
           $('input:radio').each(function() {
               if(val == $(this).val()) {
                   $(this).attr('disabled',true);
               }
           });
           //let's not disable the one we have just clicked on
           $(this).removeAttr('disabled');
       }
    });
});

および変更されたマークアップ:

<p>
  <label for="group_one">Group One</label>
</p>
<p>
  <div class="group_one">
    <div>
      <label for="group_one_choice_one">Choice One</label>
      <br />
      <input checked="checked" name="group_one" type="radio" value="1" />
      <br />
    </div>
    <div>
      <label for="group_one_choice_two">Choice Two</label>
      <br />
      <input name="group_one" type="radio" value="2" />
      <br />
    </div>
    <div>
      <label for="group_one_choice_three">Choice Three</label>
      <br />
      <input name="group_one" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>
<p>
  <label for="group_two">Group Two</label>
</p>
<p>
  <div class="group_two">
    <div>
      <label for="group_two_choice_one">Choice One</label>
      <br />
      <input checked="checked"  name="group_two"  type="radio" value="1" />
      <br />
    </div>
    <div>
      <label for="group_two_choice_two">Choice Two</label>
      <br />
      <input name="group_two" type="radio" value="2" />
      <br />
    </div>
    <div>
      <label for="group_two_choice_three">Choice Three</label>
      <br />
      <input name="group_two" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>
<p>
  <label for="group_three">Group Three</label>
</p>
<p>
  <div class="group_three">
    <div>
      <label for="group_three_choice_one">Choice One</label>
      <br />
      <input checked="checked" name="group_three" type="radio" value="1" />
      <br />
    </div>
    <div>
      <label for="group_three_choice_two">Choice Two</label>
      <br />
      <input name="group_three" type="radio" value="2" />
      <br />
    </div>
    <div>
      <label for="group_three_choice_three">Choice Three</label>
      <br />
      <input name="choice_three" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>

マークアップの変更:

  • 内側のsを取り除きましたDIV ID。
  • IDラジオの属性を に変更してNAME、ラジオ ボタンのように動作するようにしました。
于 2009-08-23T15:54:38.020 に答える
2

まず、コード内に重複する ID を含めるべきではありません。

たとえば、すべての ID を一意にしてから、ラジオボックスにクラス名class="choice_three"を付けます。

div に ID を指定できます。たとえば、ID による選択はクラスよりも高速ですid="group_three"。

次に、ラジオ ボタンを選択するには、次のコードを使用します。

$("#group_three .choice_three").attr("disabled", "disabled");

#group_three と .choice_three の間のスペースは重要です。

またはさらに高速：

$("#group_three input:radio.choice_three").attr("disabled", "disabled");

注意すべきもう 1 つの点として、「for」というラベルは、div ではなく、ラジオ ボタンに使用する必要があります。

于 2009-08-23T15:31:30.300 に答える
1

class="choice_one" などの同じ選択肢に特別なクラスを追加すると、イベント ハンドラーで次のことができます。

if ($this).hasClass("choice_one") { $(".choice_one").attr("disabled", "disabled"); }
else if ($this).hasClass("choice_two") { ... }
...
于 2009-08-23T15:36:29.337 に答える