From 000368b5018ce48794df19cd545e1721cad6ea92 Mon Sep 17 00:00:00 2001
From: morning-star <26325820+Sight-wcg@users.noreply.github.com>
Date: Mon, 30 Dec 2024 22:41:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20=E4=BF=AE=E5=A4=8D=20IE8=20?=
 =?UTF-8?q?=E4=B8=AD=20checkbox=20=E5=8D=8A=E9=80=89=E9=97=AE=E9=A2=98=20(?=
 =?UTF-8?q?#2442)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* update code

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

* chore: 恢复非 IE8 改动
---
 src/modules/form.js | 86 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 70 insertions(+), 16 deletions(-)

diff --git a/src/modules/form.js b/src/modules/form.js
index 0831bd7a..4cc1e9af 100644
--- a/src/modules/form.js
+++ b/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';
@@ -944,7 +945,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
           title = skin === 'switch' ? title.split('|') : [title];
           
           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,27 +1107,50 @@ 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){
-    var originProps = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, propName);
+  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 originProps.get.call(this);
-        },
-        set: function (newValue) {
-          originProps.set.call(this, newValue);
-          handler.call(this);
-        }
-      })
-    );
-  }
+        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,
+        lay.extend({}, originProps, {
+          // 此处的 get 是为了兼容 IE<9
+          get: function(){
+            return originProps.get.call(this);
+          },
+          set: function (newValue) {
+            originProps.set.call(this, newValue);
+            handler.call(this);
+          }
+        })
+      );
+    }
+  }()
 
   /**
    * 主动触发验证
@@ -1282,6 +1317,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);