How to disable check box per day and fetch the selected values using Angular.js?

Question

I have one table where some dynamic drop down list is present for 7 days. I have also + button implementation which can create more row dynamically for a day.

For each row I have check box. Here I need for each day user can only check up-to two check box and other will remain disable.

In my case after checked from 2 check box from total table other are becoming disable but here I need to disable per day.

My all working code is present inside: plunkr.

There you can find one Edit button; I need when user will click on edit button the stored data (clicked on store button) will again set on the required field with check box.

My all code is here.

What do you want to achieve? "i need to disable per day", when does it have to be disabled? — ThomasS, May 26 '16 at 11:29
let me to explain again.Go to that plunkr code.Suppose user has selected max two check box for `monday` and for that monday user can not selected more check box it will remain disable.Same for the all day.right not its happening in whole table. — satya, May 26 '16 at 11:32

score 0 · Answer 1 · edited May 23 '17 at 11:52

Is this what you require, it's a little hard to understand your question:

So instead of your disabled function:

  $scope.chk =[];
  $scope.isDisabled = function(dayName) {
    var count = 0;
    if ($scope.chk[dayName]) {
      for (var prop in $scope.chk[dayName]) {
        if ($scope.chk[dayName][prop]) count++;
      }
    }
    return count++ === 2;
  };

Note the line above the disabled function. And then your html:

    <td>
    <input type="checkbox" 
           name="{{d.day_name}}" 
           value="true"
           ng_model="chk[d.day_name][$index]"
           ng-checked="answerIsSelected($parent.$index, $index)"
           ng-click="toggleAnswerSelected($parent.$index, $index)"
           ng-disabled="isDisabled('{{d.day_name}}')" /> 
    </td>

Plunk here: Plunky McPlunk

Seems to do as you ask, disable after 2 goes.

Check this additional link: More insight

For further info

How to disable check box per day and fetch the selected values using Angular.js?

1 Answers1