多选按钮固定某些选项必选且不允许修改

本文主要是介绍多选按钮固定某些选项必选且不允许修改，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

FR自带的多选按钮，只支持整个按钮组的禁用和可用，以及默认值得设置，并不能单独设置多选组中某个或某几个按钮必选且不允许用户修改。

接下来提供一种思路实现以上功能，先上效果图。

目前实现效果：

1. 强制选中A、C两个选项。

2. A与C两个选项的按钮是灰色的禁止编辑的。

3. A与C两个选项点击不会对结果值产生任何影响。

实现思路大致如下：
第一步：在控件的值中写入A,C，使页面加载后默认这两项是被选中的。

第二步：在页面初始化结束后，将A与C两个选项的样式设置为禁止编辑，相关代码如下：

// 将不允许修改的样式修改为禁止选中
setTimeout(function() {
	var a = $("div[widgetname='ABC']").length;
	for (var i = 1; i < a; i++) {
		if ("A,C".indexOf($("div[widgetname='ABC']:eq(" + i + ") span").text()) != -1) {
			$("div[widgetname='ABC']:eq(" + i + ")").removeClass("ui-state-enabled");
			$("div[widgetname='ABC']:eq(" + i + ")").addClass("ui-state-disabled");
		}

	}
}, 100)

第三步：给控件增加状态改变事件，相关代码如下：

// 判断数组是否完全包含于另一个数组中
function isInclude(aa, bb) {
	return aa.every((item) => {
		return bb.some((sub) => {
			return sub === item;
		});
	});
};

// 合并去重两个数组
function uniqueArr(arr1, arr2) {
	//合并两个数组
	arr1.push(...arr2) //或者arr1 = [...arr1,...arr2]
	//去重
	return Array.from(new Set(arr1)) //let arr3 = [...new Set(arr1)]

};

// 获取点击后控件的值
var abc = _g().parameterEl.getWidgetByName("ABC").getValue();

// 判断点击后的值是否包含控件中指定的值，如果不包含则不允许修改
if (!isInclude("A,C".split(","), abc.split(","))) {
	_g().parameterEl.getWidgetByName("abc").setValue(uniqueArr(abc.split(","), "A,C".split(",")));
}

这一步的主要功能是在用户点击按钮组（无论ABC哪个选项）时，通过对比默认值和点击后的结果值来确认用户点的是不是禁止编辑的选项，如果不是的话就直接将结果值返回就可以。如果点击的是默认禁止编辑的值（即A与C）的话，就将默认值与结果值转换成数组并合并去重即可得到最后的结果值。这样就达到了即使点击了禁止编辑的选项依旧不会对结果值有影响。

这篇关于多选按钮固定某些选项必选且不允许修改的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！