0

だから、私はいくつかのチェックボックスでこの問題を抱えています。まず、「プロジェクト」そのものについてお話しさせてください。これは Web フォームです。ユーザーはフォームに入力し、購入したいものに応じていくつかのチェックボックスとラジオ ボタンをオンにする必要があります。最初に、1 と 2 の番号が付けられた 2 つの無線弾丸があり、購入したい製品の数量を表しています。それらの隣には、製品の色を表す約 5 つのチェックボックスがあります。それらの数は関係ありません。ユーザーがラジオ ボタンで 1 つを選択すると、1 つのチェックボックスのみが表示されます。アクティブで、2 を選択すると、チェックできるチェックボックスは 2 つだけになります。だから..誰かが私を助けることができますか？jQueryを考えたのですがわかりません...

2 つの div があり、#radioButtons の id を持つ最初の div には 2 つのラジオ ボタンがあり、2 番目の div には残りのチェックボックスがあります。

4

4 に答える 4

1

投稿にマークアップを付けていないので、次のように推測します。

HTML

<div id="radioButtons">
  <input type="radio" name="quantity" id="radio1">
  <input type="radio" name="quantity" id="radio2">
</div>
<div class="checkBoxes">
  Color 1:<input type="checkbox" name="color" disabled="disabled">
  Color 2:<input type="checkbox" name="color" disabled="disabled">
  Color 3:<input type="checkbox" name="color" disabled="disabled">
  Color 4:<input type="checkbox" name="color" disabled="disabled">
  Color 5:<input type="checkbox" name="color" disabled="disabled">
</div>

jQuery

$('#radio1').on('change', function() {
    $('.checkBoxes :checkbox').prop('disabled', true);
    $(':checkbox:eq(0)').prop('disabled', false);
});

$('#radio2').on('change', function() {
    $('.checkBoxes :checkbox').prop('disabled', true);
    $(':checkbox:eq(0), :checkbox:eq(1)').prop('disabled', false);
});

サンプル ワークアウト

于 2012-06-02T20:38:39.323 に答える
1

問題が発生している実際のHTML ソースを使用する場合があります。

編集：

なぜこれをやりたいのか理解に苦しむ。ユーザビリティの観点からすると、この解決策は非常に珍しく、少し悪いかもしれません。いくつか質問させてください。

  • なぜこのように機能させたいのですか？
  • ユーザーに何を選択させたいですか?

インライン選択の可能性はたくさんあります。有名な例は、apple.com で iPad タイプを選択することです。しかし、最も重要なことは、非常に理解しやすく使い心地の良いユーザー インターフェイスをユーザーに提供することです。

于 2012-06-02T23:24:17.063 に答える
0

サンプルをご覧ください

ラジオの ID に作成するチェック ボックスの数を維持し、div にチェック ボックスを動的に作成します。

編集：

あなたがくれたフィドルを更新します。ご覧くださいUpdate Fiddle

于 2012-06-02T20:57:14.030 に答える
0

チェックボックスにクリックイベントを追加し、イベントハンドラー内で許可されている最大チェックボックスの条件を確認し、その制限に達したかどうかに基づいて true または false を返すことができます。

于 2012-06-02T20:31:39.067 に答える