Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
topcattwpro
0viewers