HTMLfrom表单只读状态设置和取消

1、问题

最近接个需求&＃xff0c;使用的是springboot &＃43; Bootstrap &＃43; thymeleaf&＃xff1b;页面中的新增和详情用的是一个表单&＃xff0c;故而在查看详情时候需要将form表单设置成只读状态&＃xff0c;首先想到的是 readonly 和 disable。
但是这种方法都是在input输入框中设置&＃xff0c;我的字段比较多&＃xff0c;所以比较麻烦&＃xff0c;不适用。
而且我的需求中需要点击按钮就可以编辑&＃xff08;编辑按钮有权限才显示&＃xff09;&＃xff0c;而且disable时候多选变成了灰色&＃xff0c;影响视觉。

2、解决办法

设置form表单的id属性。第一次进入页面中时候是只读状态。

使用js。

// true 的时候就是只读$(&＃39;#formId&＃39;).find(&＃39;input,textarea&＃39;).attr(&＃39;disabled&＃39;,true);// 编辑按钮function edit(){// false时候就是可以正常编辑$(&＃39;#formId&＃39;).find(&＃39;input,textarea&＃39;).attr(&＃39;disabled&＃39;,false);}