ブールオプションを表示して、そのうちの1つを「プライマリ」として選択するにはどうすればよいですか。
Webブラウザーで、ユーザーに提示するいくつかの選択肢（たとえば3〜10）を提示する状況があります。
- エンドユーザーは、有効にするためにこれらのオプションの少なくとも1つを選択する必要があります
- エンドユーザーは、有効なオプションの1つを「プライマリ」オプションとして選択する必要があります。
ただし、これを行うのに最適な方法はわかりません。これをよりよく説明するのに役立つかもしれないシチューに関する不自然な状況は次のとおりです。
7つの潜在的な要素があり、ユーザーはそれらのそれぞれを有効または無効にする必要があります（チェックボックスを要求します）が、少なくとも1つは有効にする必要があります。そのうちの1つが主要な成分である必要があります（ラジオボタンが鳴ります）。
制約チェックのないダムフォームを選択した場合、これは簡単に実装できますが、有効な材料として牛肉、豚肉、にんじんを選択し、次に主要な材料としてジャガイモを選択することができます（ジャガイモをチェックしなかったため問題です）有効化された成分の中のボックス）
または、最初に主要な原材料を配置してから、それらに副次的な原材料を選択させ、主な原材料を副次的な原材料のリスト（下の例では牛肉）で強制的に選択させ、選択を解除しないようにすることもできます。 HTML/Javascriptで実装するのはそれほど難しくありませんが、いくつかの注意点があります...以下のUI状態から始めて、主な成分をタマネギ、チキン、そしてポークと選択するとどうなるでしょうか。タマネギ、チキン、ビーフのチェックボックスはどうなりますか？
これらのオプションはどちらも、リストを2回複製する必要があります。
または、ある種の多肢選択スライダーを使用して主要な成分を選択しようとすることもできます...これにより、リストを複製する必要がなくなります...しかし、これは組み込みのHTML機能ではないので、所有するか、サードパーティのUI要素を適用しようとします。
または、各ボタンの前にラジオボタンとチェックボックスを配置することもできます（主要成分のラジオボタン、非主要成分を有効にするチェックボックス）。コンパクトでシンプルな表現ですが、セマンティクスがわかりにくい場合があります。
助言がありますか？
ご存知のように、チェックボックス形式の選択の組み合わせと、ラジオ形式の選択のフィルタリングされたリストを収集する必要があります。
両方を1つのリストに結合します。チェックボックスは、主要な「ラジオボタン」（このモックアップの星ですが、デザインに合わせます）を有効にします。
通常、人々はデフォルトが選択されていないラジオボタンのリストを避ける傾向がありますが、あなたの場合、「デフォルトのプライマリ」は意味がないかもしれないので、文字ラジオボタン要素を使用せず、代わりに星を選択しました。 。
スターをクリックすると、ラジオボタンと同様に、最初の選択が置き換えられ、一度に1つのスターのみが許可されます。次のアイテムにスターを付ける前に、ユーザーがアイテムのスターをはずしたほうが快適な場合があります。大したことはありません。そうすることを許可し、最後に要件を適用します。
リストが長い場合は、おそらく指定された「プライマリ」オプションを上部に静的に複製します。
インプットメソッドのみを使用して要件を厳密に伝えるのは難しい場合があるので、ユーザーに選択方法を認識させ、最後にいくつかの検証に頼るようにするための手順を少し追加します。
これは言い回しの問題かもしれません。最初のオプション（Nのうち1つなので、ラジオボタン）から始める場合は、「追加オプション」リストを表示して、0の追加オプションを選択することができます（チェックボックスが意味をなすため）。
「プライマリ」は意味的に「最初」に関連しているため、これはさらに意味があります。したがって、ダイアログを「プライマリオプション」で開始するのは当然です。追加オプションのランキングがないため、「2次オプション」はありません。これらはすべて「追加オプション」です。私たちは人々がそれらを見ることを期待する順番で言葉を使います。これにより、認知負荷が軽減されます。
@maxathousandの答えは本当に素晴らしく、きれいですが、別のオプションを追加すると思いました。
ラジオの選択肢の動的なリストが表示された複数選択のドロップダウンは、わかりやすく明確だと思います。これが私がモックアップした小さなGIFです。
そして、もし誰かがそれを望んでいるなら、モックアップへのリンク： https://jsfiddle.net/gjudck24/
私は...するだろう：
- 「主要成分は何ですか？」という質問をユーザーに提示します。
ユーザーがドロップダウンメニューから選択する（複数選択はできません）
ユーザーが主要な成分を選択すると、2番目の質問と追加の成分のリスト（チェックボックスのリスト、またはGammaGamesの回答のような複数選択のコンボのいずれか）が表示されます。
以下は簡単なモックアップです（私がWebスクリプトよりも高速にコーディングしているため、c＃で実行されます）。見た目を良くするだけでなく、アイデアを説明するだけです。
2番目のリストについては、それをパッシブ/スタティックに維持し（したがって、以下の完全なリストに主な成分がまだ存在する）、次のように決定できます。
- 2番目のリストの主成分を自動的にチェックします
- 2番目のリストの主な成分を完全に無視します（チェックマークが付いているかどうかにかかわらず）。
または、より積極的に、二次リストの主要成分を削除します（ただし、特にユーザーがプロセスの途中で主要成分を変更する場合は、より多くのコーディングが必要になります）。
最初の設計コンセプトは、説明されているタスクを考えると、2つのうちより論理的であるようです。
エンドユーザーは、有効にするためにこれらのオプションの少なくとも1つを選択する必要があります
エンドユーザーは、有効なオプションの1つを「プライマリ」オプションとして選択する必要があります。
しかし、混乱はユーザーが選択した成分のみを含むべきである2番目のリストを複製することに起因すると思います。これにより、1つ以上のアイテムを選択し、そのうちの1つを主要な成分として指定する必要があることが明らかになります（1つしかない場合でも）。
したがって、検証は、チェックボックスグループの動作を可能にするリストを提供し、単一の項目が選択されるように検証を適用することです（検証の前または後に2番目のリストを入力することを選択できます）。その後、2番目のリストをラジオボタングループの動作で検証します。
ルックアンドフィールを実装するにはさまざまな方法があります（たとえば、動作をカスタマイズしたラジオボタンではなくトグルボタン）。ロジックを最初に正しくすることが重要です。
上記のオプションの別のオプションは、グループ化でリストの追加/削除ペアを活用することです。私はMMCスナップインウィンドウをレイジーモックアップとして使用しました。右側のグループ化された左側のリストから材料を追加できます。追加された最初の材料がプライマリになり、追加の原材料は、追加の原材料グループに分類されます。追加グループの別の原材料を選択し、[上に移動]（または[主に作成]など）を選択することにより、主材料を切り替えることができます。
