场景：
有一个列表页面，选中不同行时，根据当前行的状态有不同的按钮可操作，且操作有前后逻辑顺序；
问题：
当选中A时，对应按钮由disabled转为可操作，选中B时，对应按钮转为可操作，但A的操作按钮也属于可操作状态；
原因：
默认button添加disabled属性，js中判断选中后，获取对应状态，根据对应状态将disabled用prop转为false；
解决：
后台有相应校验，即使出现如此问题，后台也会返回错误信息，不会影响业务，但前台感官不好，故打算修改；
使用的bootstrap框架，初打算每次选中后刷新页面，从而重置按钮状态：
1 $(‘#settlementTable‘).on(‘check.bs.table uncheck.bs.table load-success.bs.table ‘ + 2 ‘check-all.bs.table uncheck-all.bs.table‘, function () { 3 refresh()； 4 let status = getStatusSelections(); 5 if (status) { 6 if (status == 0) { 7 $(‘#remove‘).prop(‘disabled‘, !$(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length); 8 $(‘#edit‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 9 $(‘#confirm‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 10 } else if (status == 1) { 11 $(‘#cancel‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 12 $(‘#printing‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 13 $(‘#export‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 14 } else { 15 $(‘#export‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 16 } 17 } 18 });
结果会导致页面一直在刷新，无法选中，苦思冥想如何刷新页面；
突然灵光一现，目的是让按钮状态重置，不一定需要刷新页面，后改为如下：
1 $(‘#settlementTable‘).on(‘check.bs.table uncheck.bs.table load-success.bs.table ‘ + 2 ‘check-all.bs.table uncheck-all.bs.table‘, function () { 3 $(‘#remove,#edit,#confirm,#cancel,#printing,#export‘).prop(‘disabled‘, true); 4 let status = getStatusSelections(); 5 if (status) { 6 if (status == 0) { 7 $(‘#remove‘).prop(‘disabled‘, !$(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length); 8 $(‘#edit‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 9 $(‘#confirm‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 10 } else if (status == 1) { 11 $(‘#cancel‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 12 $(‘#printing‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 13 $(‘#export‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 14 } else { 15 $(‘#export‘).prop(‘disabled‘, $(‘#settlementTable‘).bootstrapTable(‘getSelections‘).length != 1); 16 } 17 } 18 });
故此，每次选中后会先将按钮状态统一置为disabled，之后根据选中状态相应调整按钮属性。
记录主要目的是提醒自己，思路要灵活一点！
附：
刚开始多个id时写了多行代码：
1 $(‘#remove‘).prop(‘disabled‘, true); 2 $(‘#remove‘).prop(‘disabled‘, true); 3 $(‘#remove‘).prop(‘disabled‘, true); 4 $(‘#remove‘).prop(‘disabled‘, true); 5 $(‘#remove‘).prop(‘disabled‘, true); 6 $(‘#remove‘).prop(‘disabled‘, true); 7 $(‘#remove‘).prop(‘disabled‘, true);
类比与此，后百度了多个id同事设置的方式，遂改为如下：
1 $(‘#remove,#edit,#confirm,#cancel,#printing,#export‘).prop(‘disabled‘, true);
一行解决问题。
原文：https://www.cnblogs.com/JillisRealM/p/11525669.html