[Vue][筆記]CheckBox 最多限制選項個數處理方式(透過disabled)

當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

 

筆記下來,提供自己未來參考,也提供網友們參考

^_^

 

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat