最低1つ以上チェックされていない場合はbuttonをdisabledのままにしたい

html
1<body ng-controller="MyController">
2  <form name="myForm" novalidate>
3    <input type="text" name="hoge" ng-model="hoge" ng-required="true" ng-change="CheckState()">
4    <input type="checkbox" name="check1" value="1" ng-model="check1Selected" ng-change="CheckState()">
5    <input type="checkbox" name="check2" value="1" ng-model="check2Selected" ng-change="CheckState()">
6    <button type="submit" ng-disabled="myForm.$invalid">送信</button>
7  </form>
8</body>

javascript
1angular.module('myApp', [])
2.controller('MyController', ['$scope', function($scope) {
3  $scope.CheckState = function () {
4    if( !$scope.check1Selected
5      &&!$scope.check2Selected ){
6      $scope.myForm.$valid = false;
7    }
8  };
9}]);

やりたいこと：
0. 初期状態ではボタンは使用不可
0. テキストボックスを入力する
0. チェックボックスにチェックを入れる（最低1つ以上にチェックされている状態）
0. ボタンが使用可能になる

現状：
0. 初期状態ではボタンは使用不可
0. テキストボックスを入力する
0. ボタンが使用可能になる（1つもチェックしていない状態）

buttonはformのvalidで使用可否の制御をしていますが、
"$scope.myForm.$valid = false;"でfalseを設定してもbuttonがそれを検知しません。
どのようにすれば正しく制御できますでしょうか？

行動規範の内容に同意します

回答3件

ベストアンサー

以下のコードでひとまず期待する動きになると思います。
(<scirpt>...</script>で手抜きしてます...)

<body ng-controller="MyController">
  <form name="myForm" novalidate>
    <input type="text" name="hoge" ng-model="hoge" ng-required="true">
    <input type="checkbox" name="check1" value="1" ng-model="check1Selected">
    <input type="checkbox" name="check2" value="1" ng-model="check2Selected">
    <button type="submit" ng-disabled="myForm.$invalid || invalidCheckbox()">送信</button>
  </form>

<script>
angular.module('myApp', [])
  .controller('MyController', function($scope){
    $scope.invalidCheckbox = function(){
      return !$scope.check1Selected && !$scope.check2Selected;
    };
});
</script>

他にも 'myForm.$setValidity(...)' みたいなやり方もあります。
ご興味あれば調べてみてください。

投稿2017/06/08 10:11

KenichiKANAI

総合スコア86

yuki84web

2017/06/08 12:46

お陰様で期待通りの動作が実現出来ました。他の方法についても調べてみようと思います。ありがとうございました。

行動規範の内容に同意します

ネイティブJSでよければ、下記で。

HTML
1<form name="myForm" action="./hoge/">
2  <input type="text" name="hoge">
3  <input type="checkbox" name="check1" value="1">
4  <input type="checkbox" name="check1"  value="1">
5  <button type="submit" name="submitBtn" disabled="disabled">送信</button>
6</form>

JavaScript
1var $formObj = document.forms.myForm;
2var $inputText = $formObj.hoge,
3  $chks = $formObj.check1,
4  $submitBtn = $formObj.submitBtn;
5
6var $chksArr = new Array(0);
7
8var $checkBoxAllCheck = function(){
9  return $chksArr.every(function(val, index){
10    return val.checked;
11  });
12};
13var $allCheckFunc = function(){
14  $submitBtn.disabled = !($inputText.value.length > 0 && $checkBoxAllCheck());
15};
16
17for (var i = 0; i < $chks.length; i++) {
18  $chks.item(i).onchange = $allCheckFunc;
19  $chksArr.push($chks.item(i));
20}
21$inputText.onblur = $allCheckFunc;

投稿2017/06/07 15:22

miyabi_pudding

総合スコア9528

yuki84web

2017/06/07 23:47

ありがとうございます。コード掲載していませんがバリデートエラー時のメッセージ表示などがありますので出来ればAngularJSで処理したいのですが、通常のJSの方法も考えます。ただ、頂いたコードで上手く動かなかったので見直してみます。

行動規範の内容に同意します

あまり美しくないですがダミーを使ってcssで処理するとか

HTML
1<style>
2[type=submit]{display:none;}
3[type=button]{display:inline;}
4:checked ~ [type=submit]{display:inline;}
5:checked ~ [type=button]{display:none;}
6</style>
7<form name="myForm" novalidate>
8<input type="text" name="hoge">
9<input type="checkbox" name="check1" value="1">
10<input type="checkbox" name="check2" value="1">
11<input type="button" value="test" disabled> <!--だみー-->
12<input type="submit" value="test">
13</form>
14