修改在禁用状态下按钮显示不清晰问题

ruoyi-admin/src/main/resources/templates/system/user/userApply/applyDetail.html

@@ -118,7 +118,7 @@
                     <label class="col-sm-4 control-label">角色：</label>
                     <div class="col-sm-8">
                         <label th:each="role:${roles}" class="check-box">
-                            <input name="role" disabled type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}" th:checked="${role.flag}">
+                            <input name="role" disabled type="radio" th:value="${role.roleId}" th:text="${role.roleName}" th:checked="${role.flag}">
                         </label>
                     </div>
                 </div>
@@ -277,7 +277,31 @@
             }
         });
     }
+    document.addEventListener('DOMContentLoaded', function () {
+        // 获取所有name为role的radio按钮
+        var radios = document.querySelectorAll('input[type="radio"]');
 
+        // 遍历所有radio按钮，找到初始选中的按钮并将其设置为可操作状态
+        radios.forEach(function (radio) {
+            if (radio.checked) {
+                radio.disabled = false;
+            }
+
+            // 为每个radio按钮添加点击事件监听器
+            radio.addEventListener('click', function () {
+                // 遍历所有radio按钮
+                radios.forEach(function (otherRadio) {
+                    // 如果不是当前点击的按钮且未被选中，则设置为禁用状态
+                    if (otherRadio!== this &&!otherRadio.checked) {
+                        otherRadio.disabled = true;
+                    } else {
+                        // 确保当前选中的按钮及未选中但之前被操作过的按钮为可用状态
+                        otherRadio.disabled = false;
+                    }
+                });
+            });
+        });
+    });
     $("input[name='birthday']").datetimepicker({
         format: "yyyy-mm-dd",
         minView: "month",

ruoyi-admin/src/main/resources/templates/system/user/userexamine/examinedetail.html

@@ -118,7 +118,7 @@
                     <label class="col-sm-4 control-label">角色：</label>
                     <div class="col-sm-8">
                         <label th:each="role:${roles}" class="check-box">
-                            <input name="role" disabled type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}" th:checked="${role.flag}">
+                            <input name="role" disabled type="radio" th:value="${role.roleId}" th:text="${role.roleName}" th:checked="${role.flag}">
                         </label>
                     </div>
                 </div>
@@ -374,7 +374,31 @@
         };
         $.modal.openOptions(options);
     }
+    document.addEventListener('DOMContentLoaded', function () {
+        // 获取所有name为role的radio按钮
+        var radios = document.querySelectorAll('input[type="radio"]');
 
+        // 遍历所有radio按钮，找到初始选中的按钮并将其设置为可操作状态
+        radios.forEach(function (radio) {
+            if (radio.checked) {
+                radio.disabled = false;
+            }
+
+            // 为每个radio按钮添加点击事件监听器
+            radio.addEventListener('click', function () {
+                // 遍历所有radio按钮
+                radios.forEach(function (otherRadio) {
+                    // 如果不是当前点击的按钮且未被选中，则设置为禁用状态
+                    if (otherRadio!== this &&!otherRadio.checked) {
+                        otherRadio.disabled = true;
+                    } else {
+                        // 确保当前选中的按钮及未选中但之前被操作过的按钮为可用状态
+                        otherRadio.disabled = false;
+                    }
+                });
+            });
+        });
+    });
     function doSubmit(index, layero){
         var body = $.modal.getChildFrame(index);
         $("#treeId").val(body.find('#treeId').val());