相互に排他的なチェックボックスを作成する (C#)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

一連のオプションの 1 つだけが選択される場合は通常、ラジオ ボタンが使用されます。 ただし、次のような欠点もあります: 一度グループ内の 1 つのラジオ ボタンが選択されると、すべてのラジオ ボタンのチェックを外すことができません。 チェック ボックスはいつでもチェックを外すことができますが、相互排他的ではありません。 このチュートリアルでは、両方のアプローチの良いとこどりである相互排他的なチェック ボックスを紹介します。

概要

一連のオプションの 1 つだけが選択される場合は通常、ラジオ ボタンが使用されます。 ただし、次のような欠点もあります: 一度グループ内の 1 つのラジオ ボタンが選択されると、すべてのラジオ ボタンのチェックを外すことができません。 チェック ボックスはいつでもチェックを外すことができますが、相互排他的ではありません。 このチュートリアルでは、両方のアプローチの良いとこどりである相互排他的なチェック ボックスを紹介します。

手順

ASP.NET AJAX Control Toolkit には MutuallyExclusiveCheckBox エクステンダー コントロールが含まれています。 これにより、プログラマはグループ名 (Key 属性) に任意のチェックボックスを割り当てることができます。 同じグループ内のすべてのチェック ボックスから、一度に選択できるのは 1 つだけです。

まず、新しい ASP.NET ページに 2 つのチェック ボックスを配置することから始めましょう。 もっと多くすることもできますが、以下のように原則のデモを行うには 2 つで十分です。

<asp:CheckBox ID="cbYes" runat="server" />Yes
<asp:CheckBox ID="cbNo" runat="server" />No

どちらのチェックボックスに対しても、MutuallyExclusiveCheckBoxExtender コントロールをページに配置する必要があります。 HTML ラジオ ボタン要素の値属性はそれぞれが属するグループを示すために同じにする必要があるのと同様に、両方の Key 属性に同じ値を持たせる必要があります。 エクステンダー コントロールの TargetControlID プロパティは、チェック ボックスの ID を指します。

<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="mecbe1" runat="server"
 TargetControlID="cbYes" Key="YesNo" />
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="mecbe2" runat="server"
 TargetControlID="cbNo" Key="YesNo" />

最後に、以下のように ASP.NET AJAX Control Toolkit のすべての要素で必要な ASP.NET AJAX ScriptManager を含めます。

<asp:ScriptManager ID="asm" runat="server" />

ページを保存して実行します。どちらのチェック ボックスもチェックを付けたり外したりできますが、両方のチェック ボックスに同時にチェックを付けることはできません。

Only one checkbox can be checked at a time

一度にチェックを付けることができるチェックボックスは 1 つだけです (フルサイズ画像を表示するにはクリックしてください)

次へ