web-dev-qa-db-ja.com

ラジオボタンとチェックボックスが混在するフォームでオプションのラジオボタンの選択を解除する

問題

現在3つのラジオボタンがあるフォームで作業しています。ユーザーが1つのオプションしか選択できないようにするため、元々はラジオボタンを選択しました。

o Option 1 (Default selection)
o Option 2 (Has an accompanying textbox)
o Option 3

これで、このフォームを変更する必要があると言われました。以前はユーザーが単一のオプションしか選択できなかったのに対し、今では企業はユーザーが最大2つのオプションを選択できるようにしたいと考えています。

オプション1とオプション2はラジオボタンのままですが、オプション3はチェックボックスになります。これで、ユーザーはオプション1またはオプション2のいずれかを選択できるようになり、オプション3も選択できるようになります。または、ユーザーはオプション3を選択するだけで、オプション1またはオプション2を選択する必要はありません。デフォルトとして設定します。

o Option 1
o Option 2 (Has an accompanying textbox)

-------------

[ ] Option 3

問題

更新されたデザインで予想される問題は、ユーザーが誤ってオプション1またはオプション2を選択した場合、選択を解除できないことです。このセクションは大きなフォームの一部であるため、フォームを更新することはできません。

私はこのセクションを根本的に変えることはないが役に立たないエレガントなソリューションを見つけるために一日中費やしてきました。

usabilityformsradio-buttons
6
CinnamonBun

ラジオボタンを適切に使用すると、非選択が含まれます。だからあなたは持っているだろう

• None
o Option 1
o Option 2

これは、最初のオプションが「1つ選択」のようなドロップダウンに相当します。

ウィジェットを選択解除したい場合は、チェックボックスを使用します。私の職場の開発チームは、一度に選択できるアイテムの数の最小値と最大値を含むカスタムチェックボックスコンポーネントを作成しました。

10
Ken Mohnkern

同じ質問でラジオボタンとチェックボックスを混在させる必要性について少し背景がありませんが、Option 1とOption 2の間に互換性がない可能性があるため、カスタムチェックボックスをお勧めしますOption 2をオンにするとOption 1を無効にし、Option 1をオンにするとOption 2を無効にするモジュール：

デフォルトの状態：

[ ] Option 1

[ ] Option 2

[ ] Option 3

オプション1を選択：

[X] Option 1

    Option 2

[ ] Option 3

オプション2を選択：

    Option 1 (disabled)

[X] Option 2

[ ] Option 3

オプション3を選択：

[ ] Option 1

[ ] Option 2

[X] Option 3

もちろん、他のオプションはオプション3と互換性があります。

[X] Option 1

    Option 2 (disabled)

[X] Option 3
2
paucc