AngularJS: Enable Button after Multiple Checkboxes as been "checked"

Question

Lets say i have two Questions, each with their respective checkboxes and a "Next->" button. I want to enable the "Next" button, once each Question has at least one checked checkbox. I have everything wrapped around a Form. Something like this

<form name="form_" novalidate>
 <div="cont_1" >
     <label>
      <input type="checkbox" ng-model="data1.enabled" ng-required="!data1.enabled">
     </label>
      .
      . 
  </div>
  <div="cont_2" >
     <label>
       <input type="checkbox" ng-model="data5.enabled" ng-required="!data5.enabled">
     </label>
       .
       .
  </div>
  <button ng-disabled="form_.$invalid">
  </form>

The problem is that I have to select ALL checkboxes for the button to enable, i dont want that, what i want is for at least one from each question to be checked for the button to enable, it can be 1 & 1, 2 & 3 etc.. but not forcefully ALL of them. Ive used the ng-required with radiobutton before and it does work. Not the same with check boxes though. It seems the $invalid is checking for all of them to comply but that is not what i want.

Thanks in advance!!!

Nils · Accepted Answer · 2014-09-23 05:07:00Z

1

You should not be using ng-required for checkboxes, because required for checkbox means that it has to be selected to be valid. So if you have some checkbox in the form that is required then is has to be checked to have the form being valid.

It works differently for radio buttons. required on radio buttons enforces selection of atleast one value.

Check this

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_required

You should maintain for each question something like a flag which could be set on selecting an answer for that question, and enable the button if these flags for all the questions are set. ng-required is not the way to go about it.

answered Sep 23, 2014 at 5:07

Nils

8061 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

New Dev · Accepted Answer · 2014-09-23 06:29:39Z

1

I agree with Nils - you are hoping to get something out of ng-required that it was not meant to do.

You need to either:

implement logic in some QuestionService that determines how many checked answers constitutes an answered question, and drive your view off of that logic, or
create a directive that monitors the checkboxes among its children.

For approach (1) I created a plunker: http://plnkr.co/edit/pON3PmS77oqqe0aj4Fsb

answered Sep 23, 2014 at 6:29

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

Collectives™ on Stack Overflow

AngularJS: Enable Button after Multiple Checkboxes as been "checked"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related