jQuery属性 disabled 和输入框值表单提交

Question

我想问的是，我有一个名为全屏的复选框，当我勾选它时，两个输入框即宽度和高度应该被禁用，并将其值设置为 null。我用 j query 做得很好，但是当我提交带有全屏选项的表单时，即使这两个输入框的值为 0，它也保存了这两个输入框的先前值。

有什么帮助吗？

$("#fullscreenCheckBox").on("change", function() {
        if($(this).prop("checked")) {
            $("#height").prop("disabled", true);
            $("#height").val("");
            $("#width").prop("disabled", true); 
            $("#width").val("");

        } else {
            $("#height").prop("disabled", false);
            $("#height").prop("disabled", false);
        }
    });

值被设置为 null，但是当表单提交时它不会保留。

- canpoint

---

展示一些HTML和你的jQuery代码。 - Kamil T

用代码示例提问。 - Dhaval Bharadva

@KamilT的代码已经在那里了。 - canpoint

@canpoint 请看一下我下面的答案。如果你将隐藏字段与你现有的代码结合起来，一切都会正常工作。 - Kamil T

Answer 1

如果在表单提交时输入字段具有disabled='true'属性，则其内容不会随表单一起提交。您可以尝试在jQuery中在表单提交时重新启用它，例如：

如果在表单提交的时候，输入框上有disabled='true'这个属性，那么这个输入框里面的值就不会随表单一起被提交。你可以尝试在jQuery中在表单提交的时候重新启用它，例如：

$("#yourFormId").submit(function(){
    $("#YourInputId").prop('disabled', 'false');
});

另一种方法是为每个“可见”输入使用许多额外的隐藏字段，例如<input id='hiddenInputId' type='hidden' >，然后在jQuery中设置其值。用户看不到它们，但它们的值仍将随表单提交发送。例如：

$("#yourInputId").change(function(){
    $("#hiddenInputId").val($(this).val()));
});

之后，当您处理提交时，只需忽略常规输入值，而只使用隐藏字段。

个人认为第二种选项（使用隐藏字段）更好。您甚至可以扩展它，而不是在change（）中硬编码DOM元素ID，可以为每个元素添加data属性，一举多得 :)

- Kamil T

---

我知道可以使用隐藏字段来发送它，但是是否没有其他方法可以在不使用隐藏字段的情况下提交它呢？我没有使用ajax表单提交，因此无法在提交期间重新启用它。 - canpoint

你可以启用它，只需查看此答案中的第一个示例代码。该代码使函数在表单提交时触发。它重新启用输入，之后提交过程就会继续进行 ;) - Kamil T

不行，@KamilT，即使我在提交时启用了它们，它仍然使用旧值进行提交。 - canpoint

我尝试在提交期间重置值，但它并没有像你建议的那样运作。 - canpoint

我通过将其设置为只读来解决了问题，感谢你的答案。 - canpoint

Answer 2

我认为问题的根源在于禁用的输入字段中的值未发布到服务器。 从服务器端可以做的是检查这些值是否已经发布，如果没有，则将其设置为0。

- nubinub

---

我的意思是，disabled 属性不仅会阻止用户更改值，还会禁用组件值在表单提交时的发布。例如，如果您检查通过提交表单发布的所有数据，则如果禁用了高度和宽度，则不会检索到它们。 - nubinub

但是当我禁用它时，它仍然使用旧值进行发布 - 而不是取消或删除它的发布。 - canpoint

哦，好的，算了，我以为数据没有更新是因为没有新发布的值。但看起来这不是问题的根源，抱歉。 - nubinub

但我非常确定问题来自于后端代码，而不是客户端脚本。 - nubinub

不错，@nubinub你说得对。当我尝试检索它时，它会保留旧的帖子值，从而导致问题发生。 - canpoint