0

i have link which should be disabled when checkbox in not selected and it would be enabled when checkBox is selected

 <div class="col-md-3" >
     <span class="linkLayout">
          <a ng-click="open(calDay.dayNum)" >Add timeblock</a>
     </span>
</div>

and checkboxes are

<div class="checkbox">
    <label class="i-checks">
       <input type="checkbox" checklist-model="calendar.workingDays"  
        checklist-value="calDay.dayNum" ng-change="selectDay(calDay.dayNum)" ><i></i>{{calDay.dayName}}
    </label>
</div>
Improve this question
2
  • Please create any Fiddle with your angular js code. Commented Mar 15, 2016 at 8:03
  • 1
    Another way is to create a button and make it look like a link, it's easy with bootstrap, then you can use ng-disabled. Commented Mar 15, 2016 at 8:07

2 Answers 2

Reset to default
1

Update: since my answer wasn't enough to put you on the right track, here is a fiddle showing how one could solve such a problem.

In this example I've switched to a button element to allow the usage of ng-disabled, but the principle works on the anchor method as well (also you could easily style the button to look like a link respectively).

Check out this answer on disabling links.

Then you can ng-bind the value of the checkbox to a variable and bind the ng-class of the link to that variable as well - no need for any function calls.

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

8 Comments

i think you are saying ryt but be more specific
somewhat along the lines of <a ng-class="{disabled: ctrl.disabled}"> and <input type="checkbox" ng-model="ctrl.disabled">
and in the click function you'll have to check on disabled, somewhat like function open(param) { if(!disabled) { // do stuff } }
it is disabling only it should also be enable when i clicked on checkbox so how to enable
There is no need to enable the checkbox. It's all based on conditional logic and two-way data binding. As soon as the value of the checkbox changes, the variable is updated whereon the conditional class is updated. If you can't observe that behaviour please provide a fiddle. (also I'd highly advise you to read through some basic AngularJs tutorials)
|
0

Don't put any Condition Expression in Template. Do it at the Controller.

$scope.open = function(daynum) { if (daynum) { //code of function } }

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.