fix(form): 修复 IE8 中 checkbox 半选问题 (#2442)

* fix(table): 修复 table 在 IE8 下报错问题

* update code

* fix(form): 修复 IE8 中 checkbox 半选问题

* chore: 恢复非 IE8 改动

src/modules/form.js

@@ -10,6 +10,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
   var util = layui.util;
   var hint = layui.hint();
   var device = layui.device();
+  var needCheckboxFallback = lay.ie && parseFloat(lay.ie) === 8;
   
   var MOD_NAME = 'form';
   var ELEM = '.layui-form';
@@ -945,6 +946,12 @@ layui.define(['lay', 'layer', 'util'], function(exports){
           
           if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
 
+          // 处理 IE8 indeterminate 属性重新定义 get set 后无法设置值的问题
+          if(needCheckboxFallback){
+            toggleAttribute.call(check, 'lay-form-sync-checked', check.checked);
+            !check.checked && toggleAttribute.call(check, 'lay-form-sync-indeterminate', check.indeterminate);
+          }
+
           // 替代元素
           var reElem = $(['<div class="layui-unselect '+ RE_CLASS[0],
             (check.checked ? (' '+ RE_CLASS[1]) : ''), // 选中状态
@@ -1021,6 +1028,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
           var skin = othis.attr('lay-skin');
           
           if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
+
+          if(needCheckboxFallback){
+            toggleAttribute.call(radio, 'lay-form-sync-checked', radio.checked);
+          }
+
           hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
 
           var title = util.escape(radio.title || '');
@@ -1095,12 +1107,34 @@ layui.define(['lay', 'layer', 'util'], function(exports){
   
   /**
    * checkbox 和 radio 指定属性变化时自动更新 UI
+   * 只能用于 boolean 属性
    * @param {HTMLInputElement} elem - HTMLInput 元素
    * @param {'checked' | 'indeterminate'} propName - 属性名
    * @param {() => void} handler - 属性值改变时执行的回调
    * @see https://learn.microsoft.com/zh-cn/previous-versions//ff382725(v=vs.85)?redirectedfrom=MSDN
    */
-  Form.prototype.syncAppearanceOnPropChanged = function(elem, propName, handler){
+  Form.prototype.syncAppearanceOnPropChanged = function(){
+    // 处理 IE8 indeterminate 属性重新定义 get set 后无法设置值的问题
+    // 此处性能敏感，不希望每次赋值取值时都判断是否需要 fallback
+    if (needCheckboxFallback) {
+      return function(elem, propName, handler) {
+        var originProps = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, propName);
+
+        Object.defineProperty(elem, propName,
+          lay.extend({}, originProps, {
+            // 此处的 get 是为了兼容 IE<9
+            get: function(){
+              return typeof this.getAttribute('lay-form-sync-' + propName) === 'string';
+            },
+            set: function (newValue) {
+              toggleAttribute.call(this, 'lay-form-sync-' + propName, newValue);
+              handler.call(this);
+            }
+          })
+        ); 
+      }
+    }
+    return function(elem, propName, handler){
       var originProps = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, propName);
   
       Object.defineProperty(elem, propName,
@@ -1116,6 +1150,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
         })
       );
     }
+  }()
 
   /**
    * 主动触发验证
@@ -1283,6 +1318,25 @@ layui.define(['lay', 'layer', 'util'], function(exports){
     return new RegExp(regexPattern.join(''), !caseSensitive ? 'i' : undefined);
   }
 
+  // 引用自 https://github.com/msn0/mdn-polyfills/blob/master/src/Element.prototype.toggleAttribute/toggleattribute.js
+  function toggleAttribute(name, force) {
+    var forcePassed = arguments.length === 2;
+    var forceOn = !!force;
+    var forceOff = forcePassed && !force;
+
+    if (this.getAttribute(name) !== null) {
+        if (forceOn) return true;
+
+        this.removeAttribute(name);
+        return false;
+    } else {
+        if (forceOff) return false;
+
+        this.setAttribute(name, '');
+        return true;
+    }
+  }
+  
   var form = new Form();
   var $dom = $(document);
   var $win = $(window);