チェックボックスでどれか一つチェックをいれないとサブミットできないようにしたい。
送信ボタンにng-disabledを仕込んでおいて、チェックされると表示させるように。
はまった箇所は、$scopeをwatchする際のチェックボックスの値の取得方法。
チェックした際にng-clickなどで値を変更する挙動をしなければならなかった!
色々とざっくりしている箇所もある。
ng-checkedとかあるようだけど、使い方がようわからん。
<ons-page id="page-checkbox" ng-controller="CheckboxController"> <ons-toolbar> <div class="center">チェックボックス</div> </ons-toolbar> <form method="post" id="form" name="form" novalidate> 選択してください(複数選択可) <br /> <ul> <li ng-repeat="check in arrCheck"> <label><input type="checkbox" value="{{check.id}}" name="checkbox[]" ng-model="check.model" ng-click="changeValue($index, check.id)" />{{check.name}}</label> </li> </ul> <input type="button" value="button" ng-click="sendAct();" ng-disabled="disabled" /> </form> </ons-page>
checkbox_controller.js
myApp.controller('CheckboxController',function($scope){ var arrCheck = [ {id:1, name:'うどん', model:'check1'}, {id:2, name:'そば', model:'check2'}, {id:3, name:'ラーメン', model:'check3'} ]; $scope.arrCheck = arrCheck; $scope.disabled = true; var arrGroup = []; for(var i=0; i<arrCheck.length; i++){ var checkmodel = 'check'+i; arrGroup[i] = checkmodel; $scope[checkmodel] = 0; } $scope.changeValue = function(index, id){ var checkmodel = 'check'+index; $scope[checkmodel] = ($scope[checkmodel] == 0) ? id : 0 ; } $scope.$watchGroup(arrGroup, function() { var chk=0; for(var i=0; i<arrCheck.length; i++){ var check = arrCheck[i].model; chk += (check == true) ? 1 : 0; } $scope.disabled = (chk == 0) ? true : false; } ); $scope.sendAct = function(){ //サーバーに送信処理 } });