當Vue裡面遇上Checkbox限制最多可以選5項時，這一篇示範透過disabled的屬性控制，當超過時，沒有被選的disabled變成不能選擇
緣起
我們撰寫Vue，遇到CheckBox限制最多可挑選的個數時，可以透過disabled，當超過指定個數，沒被選擇的Checkbox就會被disabled，無法繼續選擇。藉此來限制可被選擇的個數。
範例：
以下是範例的程式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
</head>
<body>
<div id="App1">
<div class="container">
<div class="row" v-for="tOpt in oOpts">
<div class="col-1"></div>
<div class="col-1">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" v-model="tOpt.Selected" v-bind:disabled="tOpt.Disabled" v-on:change="OptChangeMaxChk(tOpt)" />
</div>
</div>
<div class="col-9">{{tOpt.Opt}}</div>
<div class="col-1"></div>
</div>
<hr>
{{oOpts}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let App1 = new Vue({
el: '#App1',
data: {
oOpts: [
{
"Opt": "AAA",
"Selected": false,
"Disabled": false
}, {
"Opt": "BBB",
"Selected": false,
"Disabled": false
}, {
"Opt": "CCC",
"Selected": false,
"Disabled": false
}, {
"Opt": "DDD",
"Selected": false,
"Disabled": false
}, {
"Opt": "EEE",
"Selected": false,
"Disabled": false
}, {
"Opt": "FFF",
"Selected": false,
"Disabled": false
}, {
"Opt": "GGG",
"Selected": false,
"Disabled": false
}, {
"Opt": "HHH",
"Selected": false,
"Disabled": false
}, {
"Opt": "III",
"Selected": false,
"Disabled": false
}, {
"Opt": "JJJ",
"Selected": false,
"Disabled": false
}, {
"Opt": "KKK",
"Selected": false,
"Disabled": false
}, {
"Opt": "LLL",
"Selected": false,
"Disabled": false
}
],
},
methods: {
OptChangeMaxChk:function(tOpt){
let _self=this;
let MaxMultiCnt = 5;
if(MaxMultiCnt>0){
let CurrentCnt = 0;
_self.oOpts.forEach(function(xOpt){
if(xOpt.Selected){
CurrentCnt+=1;
}
});
if(CurrentCnt>=MaxMultiCnt){
alert('最多可選' + MaxMultiCnt + '，您已經選滿~~\r\n如需選擇其他，要先取消其中一個~');
_self.oOpts.forEach(function(xxOpt){
xxOpt.Disabled = !(xxOpt.Selected);
});
}
else{
_self.oOpts.forEach(function(xxOpt){
xxOpt.Disabled = false;
});
}
}
},
},
});
</script>
</body>
</html>線上操作：
https://jsbin.com/rufemaj/edit?html,output
筆記下來，提供自己未來參考，也提供網友們參考
^_^
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |