使用 disabled = true 动态创建输入字段是将空值设置为零

Question

我有一个时间表。在表格的底部有一个按钮，可以让我添加一行。可以理解的是，新行中的所有单元格一开始都是空的。 JavaScript 使用：

txtFld.setAttribute('value', '');

这样做。

但是，在某些情况下，我希望某些新字段显示但被禁用，因此我（在这些情况下）添加：

txtFld.setAttribute('disabled', 'disabled');

问题在于，这样做时，提交后，当表格重新呈现自身时，所有这些空值都显示为零而不是空字符串。就计算而言，这很好，但我不想要零行。我想要空单元格。如果我取出禁用的部分，它可以正常工作。

我暂时解决了这个问题，而不是使用禁用，使用只读，这似乎给了我想要的结果。唯一的问题是，虽然文本字段仍然不可编辑，但用户可以将光标放在框内。我想要残疾人给我的清洁工，“甚至不能点击这里”。

对于禁用功能为什么会这样做以及如何在不产生零行的情况下使用禁用功能有什么想法吗？

为了记录，我混合并匹配了以下每个组合：

txtFld.setAttribute('value','');
txt.setAttribute('value', null);
txtFld.value = '';
txtFld.value = null;

与

txtFld.setAttribute('disabled');
txtFld.setAttribute('disabled', 'true');
txtFld.setAttribute('disabled', 'disabled');
txtFld.disabled = 'true';
txtFld.disabled = 'disabled';

我每次都能想到相同的结果（或更糟）。

谢谢。

Answer 1

当一个字段被禁用时，它不会包含在发送到服务器的表单参数中。

在新浏览器（IE11+，以及几乎所有其他浏览器）中，您可以使用 CSS 禁用元素上的指针事件：

txtFld.readonly = true;
txtFld.style.pointerEvents = 'none';

这将使元素根本不响应任何点击。 (Here is a jsfiddle.) 因为它没有被禁用，所以表单 POST 将将空字段发送到服务器。

您应该通过将其 DOM 节点的“禁用”属性设置为 true（布尔常量，而不是字符串）来禁用字段。

txtFld.disabled = true; // disables field
txtFld.disabled = false; // enables field

“disabled”属性被视为布尔值，因此将其设置为任何字符串值（空字符串除外）将其设置为true：

txtFld.disabled = "false"; // disables field

---

利用真正的disabled 浏览器行为并且向服务器发布空参数的另一件事是使用输入对：

<input type=text name=whatever data-companion=whatever-c> <!-- visible input -->
<input type=hidden name=whatever id=whatever-c> <!-- invisible input -->

现在，每当您启用文本字段时，您禁用隐藏的输入，反之亦然。这样一来，总会有东西发布。