0

私はこれに似た何かをする必要があります:

            | | コラム01 | コラム02 | コラム03
   -------------------------------------------------- ----------------
   行 01 | ( ) オプション 01_01 | ( ) オプション 01_02 | ( ) オプション 01_03
   -------------------------------------------------- ----------------
   行 02 | ( ) オプション 02_01 | ( ) オプション 02_02 | ( ) オプション 02_03
   -------------------------------------------------- ----------------
   行 03 | ( ) オプション 03_01 | ( ) オプション 03_02 | ( ) オプション 03_03
   -------------------------------------------------- ----------------
   行 04 | ( ) オプション 04_01 | ( ) オプション 04_02 | ( ) オプション 04_03
   -------------------------------------------------- ----------------

これは、ユーザーが使用可能なオプションから3 つを選択する必要があるサブスクリプション フォームですが、各行から1 つだけ、各列から 1 つだけです。たとえば、ユーザーがOption 01_02を選択した場合、行 01の他のすべてのオプションは使用できず、列 02のすべてのオプションも無効にする必要があります。これを達成する方法はありますか？多くの人が jQuery を使用してフォームのフィールドを有効/無効にしていますが、私がやりたいことに似たものは見つかりませんでした。役立つ情報がいくつかあります。行は、MySQL データベースから取得したデータに基づいて作成され、ラジオ ボタンを使用して実装されています。コラム_制限は後で追加されました。助けてくれてありがとう。

編集:私の例が間違っていることに気付きました。次のように、3x3 マトリックスにする必要があります。

            | | コラム01 | コラム02 | コラム03
   -------------------------------------------------- ----------------
   行 01 | ( ) オプション 01_01 | ( ) オプション 01_02 | ( ) オプション 01_03
   -------------------------------------------------- ----------------
   行 02 | ( ) オプション 02_01 | ( ) オプション 02_02 | ( ) オプション 02_03
   -------------------------------------------------- ----------------
   行 03 | ( ) オプション 03_01 | ( ) オプション 03_02 | ( ) オプション 03_03
   -------------------------------------------------- ----------------

とにかく、ルールは引き続き適用されます。

  • ユーザーは、各列から 1 つのオプションのみを選択する必要があります
  • ユーザーは、各行から1 つのオプションのみを選択する必要があります
  • ユーザーは合計3 つのオプションを選択する必要があります。

有効な選択肢は、 Option 01_02、Option 02_01、およびOption 03_03です。ユーザーはフォームを送信する前に選択内容を自由に変更できますが、ルールに従う必要があります。ユーザーが選択を変更すると、競合するオプションは選択解除され、無効なものは無効になります。私の最初のアイデアは、除外機能のためにオプションにラジオボタンを使用することでしたが、チェックボックスを使用するとより良い解決策が得られるかもしれません。

繰り返しますが、あなたの助けに感謝します。

4

3 に答える 3

0

私の友人はちょうどこの問題で私を助け終えました、そして私たちの解決策はここにあります http://jsfiddle.net/2zHA9/

ありがとうみんな=）

于 2012-06-27T02:09:21.657 に答える
0

この記事に出くわしました双方向排他性を持つラジオボタン

まさにあなたが探しているものの例があります。

HTML

<table>
<tr>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
</tr>
<tr>
    <td>Twix</td>
    <td><input type="radio" name="row-1" data-col="1"></td>
    <td><input type="radio" name="row-1" data-col="2"></td>
    <td><input type="radio" name="row-1" data-col="3"></td>
</tr>
<tr>
    <td>Snickers</td>
    <td><input type="radio" name="row-2" data-col="1"></td>
    <td><input type="radio" name="row-2" data-col="2"></td>
    <td><input type="radio" name="row-2" data-col="3"></td>
</tr>
<tr>
    <td>Butterfingers</td>
    <td><input type="radio" name="row-3" data-col="1"></td>
    <td><input type="radio" name="row-3" data-col="2"></td>
    <td><input type="radio" name="row-3" data-col="3"></td>
</tr>
</table>

CSS

table {
    border-collapse: collapse;    
}
td, th {
    border: 1px solid #ccc;
    padding: 10px;
}
th:empty {
    border: 0;
}

jquery

var col, el;

$("input[type=radio]").click(function() {
   el = $(this);
   col = el.data("col");
   $("input[data-col=" + col + "]").prop("checked", false);
   el.prop("checked", true);
});
于 2012-06-28T12:26:45.023 に答える
0

あなたが探しているもののために JSFiddle を作成しました。かなり大雑把ですが、これで必要なことを実行できるようになることを願っています。また、ご不明な点がございましたら、お気軽にお問い合わせください:)

http://jsfiddle.net/g27nh/2/

編集:必要な数の行または列を追加できるように更新しましたが、それでも適切に計算されます。更新は次のとおりです。http://jsfiddle.net/g27nh/4/

于 2012-06-26T16:42:46.813 に答える