Javascript 单击“提交”按钮时使所有表单输入处于只读模式

我有一个表单，当点击提交按钮时，表单的所有输入都需要处于只读模式，隐藏提交按钮，并显示提交文本。为此，我编写了代码：

$（文档）.ready（函数（）{
$（“#提交_文本”）.hide（）；//隐藏提交_文本
$（“#testsubmitbutton”）。单击（函数（）{
$（“#testsubmitbutton”）.hide（）；//隐藏提交按钮
$（“#提交_文本”）.show（）；//显示提交_文本
$（“#testform:input”）.prop（'readonly'，true）；//将所有输入设置为只读
});
});
.hiddenFramehideclass{
位置：绝对位置；
顶部：-1px；
左：-1px；
宽度：1px；
高度：1px；
}

问题1
问题

A

B

C

D

以上都没有

提交
提交请不要刷新！
对于单选按钮的使用
禁用
属性：


$（文档）.ready（函数（）{
$（“#提交_文本”）.hide（）；//隐藏提交_文本
$（“#testsubmitbutton”）。单击（函数（）{
$（“#testsubmitbutton”）.hide（）；//隐藏提交按钮
$（“#提交_文本”）.show（）；//显示提交_文本
$（“#testform:input”）.prop（'disabled'，true）；//将所有输入设置为disabled
});
});
.hiddenFramehideclass{
位置：绝对位置；
顶部：-1px；
左：-1px；
宽度：1px；
高度：1px；
}

问题1
问题

A

B

C

D

以上都没有

提交
提交请不要刷新！
只读不适用于单选按钮，您可以使用
禁用：true
，但是

请参阅此答案以了解禁用和只读之间的区别：


$（文档）.ready（函数（）{
$（“#提交_文本”）.hide（）；//隐藏提交_文本
$（“#testsubmitbutton”）。单击（函数（）{
$（“#testsubmitbutton”）.hide（）；//隐藏提交按钮
$（“#提交_文本”）.show（）；//显示提交_文本
$（“#testform:input”）.attr（'disabled'，true）；//将所有输入设置为只读
});
});
.hiddenFramehideclass{
位置：绝对位置；
顶部：-1px；
左：-1px；
宽度：1px；
高度：1px；
}

问题1
问题

A

B

C

D

以上都没有

提交
提交请不要刷新！
这会向服务器提交真实的检查值吗？因为它不会。@jagu2020，请检查第二个答案来处理这个问题：）我想，我们还必须将
指针事件设置为
无
标签。当我们点击标签时，它正在检查收音机。对于我添加的标签：
$（“.label\u pointer\u event”）.css（{'pointer-events'：'none'，'opacity'：'.5'}）
@jagu2020，我认为这不会像您预期的那样起作用，请检查更新的答案和可能的解决方案：）这会向服务器提交真实的检查值吗？但是，根据它不会，您可以使用css禁用指针事件，并通过ajax发送数据。。。在css中定义一个类，调整不透明度，然后添加类（'disabledPointerClass'），问题是您还必须使用e.preventDefault（），这样页面就不会刷新，这意味着通过ajax/json发送表单数据