Question

我需要做类似的事情：

            |     Column 01    |     Column 02    |    Column 03
   ------------------------------------------------------------------
   Row 01  | ( ) Option 01_01 | ( ) Option 01_02 | ( ) Option 01_03
   ------------------------------------------------------------------
   Row 02  | ( ) Option 02_01 | ( ) Option 02_02 | ( ) Option 02_03
   ------------------------------------------------------------------
   Row 03  | ( ) Option 03_01 | ( ) Option 03_02 | ( ) Option 03_03
   ------------------------------------------------------------------
   Row 04  | ( ) Option 04_01 | ( ) Option 04_02 | ( ) Option 04_03
   ------------------------------------------------------------------

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

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

            |     Column 01    |     Column 02    |    Column 03
   ------------------------------------------------------------------
   Row 01  | ( ) Option 01_01 | ( ) Option 01_02 | ( ) Option 01_03
   ------------------------------------------------------------------
   Row 02  | ( ) Option 02_01 | ( ) Option 02_02 | ( ) Option 02_03
   ------------------------------------------------------------------
   Row 03  | ( ) Option 03_01 | ( ) Option 03_02 | ( ) Option 03_03
   ------------------------------------------------------------------

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

用户必须从每个列中选择一个选项
用户必须从每个行

选项

用户必须总共选择3 选项。

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

再次感谢您的帮助。

Answer 1

我为你正在寻找的东西创建了一个JSFiddle。这很粗糙，但希望这会让你了解你需要做的事情。此外，如果您有任何疑问，请随时询问：）

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

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

Answer 2

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

谢谢你们=）

Answer 3

我刚看到这篇文章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);
});

选择性启用/禁用表单字段取决于其他字段的选择

3 个答案: