mirror of https://github.com/layui/layui
fix(form): 修复 label 和 checkbox/radio 关联时的问题 (#2795)
* fix(form): 修复 label 元素和单/多选框关联时的问题 1.两者通过 for 关联时,点击 lable 元素,label 点击事件触发一次 checkbox 属性值更新,但组件内部是通过美化元素的点击事件更新 checkbox 属性值,所以此时美化元素样式不会更新。 2.两者为包含关系时,点击 label 元素,label 点击事件和美化元素的点击事件分别触发一次 checkbox 属性值更新,导致无法正常工作。 * update * fix(checkbox): 防止事件重复绑定main
parent
845d372585
commit
d7b7d43c91
|
@ -993,6 +993,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
|||
"switch": ['layui-form-switch', 'layui-form-onswitch', 'switch'],
|
||||
SUBTRA: 'layui-icon-indeterminate'
|
||||
};
|
||||
var clickEventName = 'click.lay_checkbox_click';
|
||||
var checks = elem || elemForm.find('input[type=checkbox]');
|
||||
// 风格
|
||||
var skins = {
|
||||
|
@ -1008,7 +1009,8 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
|||
var isPrimary = skin === 'primary';
|
||||
|
||||
// 勾选
|
||||
reElem.on('click', function(){
|
||||
// 通过重新赋值触发美化元素样式更新
|
||||
check.off(clickEventName).on(clickEventName, function(e){
|
||||
var filter = check.attr('lay-filter') // 获取过滤器
|
||||
|
||||
// 禁用
|
||||
|
@ -1020,7 +1022,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
|||
}
|
||||
|
||||
// 开关
|
||||
check[0].checked = !check[0].checked
|
||||
check[0].checked = check[0].checked;
|
||||
|
||||
// 事件
|
||||
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
|
||||
|
@ -1030,6 +1032,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
|||
});
|
||||
});
|
||||
|
||||
reElem.on('click', function(){
|
||||
var hasLabel = check.closest('label').length;
|
||||
if(!hasLabel){
|
||||
check.trigger('click');
|
||||
}
|
||||
})
|
||||
|
||||
that.syncAppearanceOnPropChanged(this, 'checked', function(){
|
||||
if(isSwitch){
|
||||
var title = (reElem.next('*[lay-checkbox]')[0]
|
||||
|
@ -1125,13 +1134,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
|||
var CLASS = 'layui-form-radio';
|
||||
var ICON = ['layui-icon-radio', 'layui-icon-circle'];
|
||||
var radios = elem || elemForm.find('input[type=radio]');
|
||||
var clickEventName = 'click.lay_radio_click';
|
||||
|
||||
// 事件
|
||||
var events = function(reElem){
|
||||
var radio = $(this);
|
||||
var ANIM = 'layui-anim-scaleSpring';
|
||||
|
||||
reElem.on('click', function(){
|
||||
radio.off(clickEventName).on(clickEventName, function(){
|
||||
var filter = radio.attr('lay-filter'); // 获取过滤器
|
||||
|
||||
if(radio[0].disabled) return;
|
||||
|
@ -1145,6 +1155,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
|||
});
|
||||
});
|
||||
|
||||
reElem.on('click', function(){
|
||||
var hasLabel = radio.closest('label').length;
|
||||
if(!hasLabel){
|
||||
radio.trigger('click');
|
||||
}
|
||||
})
|
||||
|
||||
that.syncAppearanceOnPropChanged(this, 'checked', function(){
|
||||
var radioEl = this;
|
||||
if(radioEl.checked){
|
||||
|
|
Loading…
Reference in New Issue