0

我需要做类似的事情：

            | 专栏01 | 专栏02 | 专栏 03
   -------------------------------------------------- ----------------
   第 1 行 | ( ) 选项 01_01 | ( ) 选项 01_02 | ( ) 选项 01_03
   -------------------------------------------------- ----------------
   第 2 行 | ( ) 选项 02_01 | ( ) 选项 02_02 | ( ) 选项 02_03
   -------------------------------------------------- ----------------
   第 3 行 | ( ) 选项 03_01 | ( ) 选项 03_02 | ( ) 选项 03_03
   -------------------------------------------------- ----------------
   第 04 行 | ( ) 选项 04_01 | ( ) 选项 04_02 | ( ) 选项 04_03
   -------------------------------------------------- ----------------

这是一个订阅表单，用户应该选择 3 个可用选项，但每行只能选择一个，每列只能选择一个。例如，如果用户选择Option 01_02 ，则第 01 行中的所有其他选项均不可用，并且第 02 列中的所有选项也应禁用。任何想法如何实现这一目标？我看到很多人使用 jQuery 来启用/禁用表单中的字段，但没有找到与我想做的类似的事情。一些可能有帮助的更多信息：行是根据从 MySQL 数据库检索的数据创建的，并使用单选按钮实现。专栏_限制是后来添加的。谢谢你的帮助。

编辑：我现在意识到我的例子是错误的。它应该是一个 3x3 矩阵，如下所示：

            | 专栏01 | 专栏02 | 专栏 03
   -------------------------------------------------- ----------------
   第 1 行 | ( ) 选项 01_01 | ( ) 选项 01_02 | ( ) 选项 01_03
   -------------------------------------------------- ----------------
   第 2 行 | ( ) 选项 02_01 | ( ) 选项 02_02 | ( ) 选项 02_03
   -------------------------------------------------- ----------------
   第 3 行 | ( ) 选项 03_01 | ( ) 选项 03_02 | ( ) 选项 03_03
   -------------------------------------------------- ----------------

无论如何，规则仍然适用：

  • 用户必须从每一列中仅选择一个选项
  • 用户必须从每一行中仅选择一个选项
  • 用户必须总共选择 3 个选项。

一个有效的选择是：选项 01_02、选项 02_01和选项 03_03。用户可以在提交表单之前自由更改他的选择，但必须遵守规则。当用户更改他的选择时，应该取消选择冲突的选项并禁用无效的选项。我最初的想法是为选项使用单选按钮，因为它具有排除功能，但也许使用复选框可以提供更好的解决方案。

再次感谢您的帮助。

4

3 回答 3

0

我已经为您正在寻找的内容创建了一个 JSFiddle。这很粗糙，但希望这能让你开始并运行你需要做的事情。另外，如果您有任何问题，请随时提问：）

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

编辑：我已对其进行了更新，以便您可以添加任意数量的行或列，并且仍然可以正确计算它们。这是更新：http: //jsfiddle.net/g27nh/4/

于 2012-06-26T16:42:46.813 回答
0

我的一个朋友刚刚帮我解决了这个问题，我们的解决方案在这里 http://jsfiddle.net/2zHA9/

谢谢你们=）

于 2012-06-27T02:09:21.657 回答
0

我刚刚看到这篇文章Radio Buttons with 2-Way Exclusivity

它有一个你正在寻找的例子。

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 回答