javascript - 为什么同一输入字段文本中的 `readonly` 、 `disabled` 和 `required` 无法正常工作？

我正在使用输入文本字段的 readonly 、 disabled 和 required 属性，如下所示:

<input type="text" id="visitDate" name="visitdate" readonly="readonly" disabled="disabled" required="required" />

我的问题是三个属性中的两个，即 disabled 和 readonly 工作正常，但 required 不起作用。提交按钮允许提交，即使它是空的。但是如果我删除 readonly 表单不能提交为空。
我用

最佳答案

实际发生的是，默认情况下(验证的 HTML 实现)，如果字段为只读或禁用，则不会触发 HTML 中的验证。

原因很简单。如果该字段为空且属性禁用或只读，并且应用了必需的验证，则该表单在任何时候都无效。

似乎没有直接和道德的解决方案，但间接的解决方案可能是:

i) 处理按键向上/按键向下事件，以便无法添加输入。

jQuery代码:

$('input').keypress(function(e) {
    e.preventDefault();
});

ii) 对于禁用控制，我建议不要在需要之前将日期选择器添加到元素中。稍后，您可以在需要时使用 JS 添加它(在您的情况下，在选择列表更改事件上注册日期选择器)。

此外，如果您使用 jQuery UI 日期选择器，则可以使用启用和禁用 jQuery 事件，如下所示:

$("#txtSearch").datepicker("enable");
$("#txtSearch").datepicker("disable");

如需进一步阅读，您可以查看 this 链接。这是关于 Bootstrap 验证的讨论，但它也适用于纯 HTML。

希望，这会有所帮助。

关于javascript - 为什么同一输入字段文本中的 `readonly` 、 `disabled` 和 `required` 无法正常工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42372911/