JSFiddle - React, Tailwind, and code Playground

by Mahbubur Rahman

HTML

<div ng-controller="MyCtrl">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
 <div >
                  <div>
                      <label>Delivery Method</label>
                  </div>
                  <div ng-repeat="method in deliveryMethods">
                      <input type="checkbox" id="{{method.id}}"
                             value="{{method.value}}" name="deliveryMethod[]" ng-model="method.selected"
                    ng-click="toggleSelection(method.id)" ng-required="!enable" >
                      {{method.value}}

                  </div>                 
              </div>
 <input type="submit" value="Submit" ng-disabled="!enable" ng-click="submit()" />
 {{message}}
 </form>
</div>

JavaScript

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.enable = false;
$scope.message="Please select at list one item";
$scope.deliveryMethods = [{
        "id": 1,
        "value": "Test-up",
        selected: false
    }, {
        "id": 2,
        "value": "Test Two",

        selected: false
    }, {
        "id": 3,
        "value": "Test Three",

        selected: false
    }];      

    $scope.toggleSelection = function(deliveryMethods) {   
    //alert(deliveryMethods);
    for(var i = 0; i< $scope.deliveryMethods.length; i++){
    	if($scope.deliveryMethods[i].id==deliveryMethods){
      //alert($scope.deliveryMethods[i].value);
      if($scope.deliveryMethods[i].selected==false){
      $scope.deliveryMethods[i].selected=true;
      }
      else $scope.deliveryMethods[i].selected=false;
      }
      console.log($scope.deliveryMethods[i]);
    }
    if($scope.deliveryMethods[0].selected|| $scope.deliveryMethods[1].selected || $scope.deliveryMethods[2].selected){
    $scope.enable = true;
    $scope.message = "";
    }
    else {$scope.enable = false;$scope.message="Please select at list one item";}
    };
}