disabling an entire div in angularjs

Question

Is there a way to disable an entire div tag in angularjs. I have a div tag that contains inside it several form fields that I want to disable with just one condition. Is this possible? Below is my code.I tried using but it did not work. Any suggestions would be helpful. Thanks, please see code below. I have the main div tag that contains the form. I want to disable the form based on a condition, so user cannot enter the id and name text fields.

<div>
<form name="form" role="form" novalidate
class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength"
ng-submit="createStudy()">



<div class="form-group">
    <label>ID</label> <input type="text" class="form-control"
        name="id" ng-model="study.id">
</div>

<div class="form-group">
    <label>Name</label> <input type="text" class="form-control"
        name="name" ng-model="study.name" ng-minlength=1
        ng-maxlength=50 ng-required="true">
</div>



<div class="modal-footer">
   <a href="#/studies"><button type="button" class="btn btn-default"
        data-dismiss="modal" ng-click="clear()">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
    </button></a>
    <button type="submit" ng-disabled="form.$invalid"
        class="btn btn-primary">
        <span class="glyphicon glyphicon-save"></span> Save
    </button>
</div>

</form>
</div>

Pavi · Accepted Answer · 2014-08-29 04:40:14Z

60

You can use 'fieldset' instead of 'div' and it will disable all form elements inside it if you add ng-disabled to it. Please find below :

<fieldset ng-disabled="true"> 
<label>ID</label> <input type="text" class="form-control"
        name="id" ng-model="study.id">
<label>Name</label> <input type="text" class="form-control"
        name="name" ng-model="study.name" ng-minlength=1
        ng-maxlength=50 ng-required="true">
</fieldset>

answered Aug 29, 2014 at 4:40

Pavi

7674 silver badges7 bronze badges

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

2 Comments

Michal Charemza Over a year ago

This sets the 'disabled' attribute on the fieldset, which doesn't actually disable its form elements in IE 9 and below github.com/twbs/bootstrap/issues/8701

Mital Joshi Over a year ago

Not working as per requirement, still able to access all elements of the fieldset.

hering · Accepted Answer · 2016-06-24 11:03:06Z

18

You can edit the css/less to disable all elements inside the disabled div.

For example:

set the .disabled-class in html:

<div ng-disabled="disableExpression" 
     ng-class="{'disabled': disableExpression}"
>
  <!-- content -->
</div>

style your disabled div:

.disabled{
  opacity: 0.5;
  pointer-events: none;

  > * {
    opacity: 0.5;
    pointer-events: none;
  }
}

edited Jun 24, 2016 at 11:03

answered Jun 24, 2016 at 10:56

hering

1,9524 gold badges29 silver badges43 bronze badges

1 Comment

Pini Cheyni Over a year ago

Still accessible using a keyboard

Jayantha Lal Sirisena · Accepted Answer · 2014-08-29 03:22:21Z

7

you can easily create your own directive for this, this will disable all the inputs inside the element (form in your case);

yourModule.directive('disableForm',function(){

    return{
       scope:{
         disableForm:'=' 
       }
       link:function(scope, element ){
         if(scope.disableForm){
          angular.element('input',element).attr('disabled','disabled') ;
         }
       }
     }
    });

and in HTML,

<form name="form" role="form" novalidate disable-form="condition" ...

answered Aug 29, 2014 at 3:22

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

Comments

Mr Lister · Accepted Answer · 2016-03-24 21:59:31Z

7

in the main <div> you write:

<div ng-class="{'my-disable':condition}">

in the css file:

.my-disable{
    pointer-events:none;
}

edited Mar 24, 2016 at 21:59

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Mar 16, 2016 at 10:04

user5980267

2 Comments

jessewolfe Over a year ago

This worked perfectly! However, it's a relatively new CSS attribute that isn't supported in older browsers.

Swapan Pramanick Over a year ago

This will not work if user navigates or move across the field using tab and type something.

silentser · Accepted Answer · 2015-10-29 10:59:34Z

2

This directive has worked nicely for me: https://github.com/PLEEROCK/angular-disable-all

answered Oct 29, 2015 at 10:59

silentser

2,1332 gold badges24 silver badges30 bronze badges

Comments

Chandermani · Accepted Answer · 2014-08-29 04:35:42Z

1

Div does not have concept of disable. Input have a concept of readonly. You can use the ng-readonly attribute with binding to the variable that determines whether the form is read only

<input type="text" class="form-control" name="id" ng-model="study.id" ng-readonly="readMode">

answered Aug 29, 2014 at 4:35

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

1 Comment

Chandermani Over a year ago

It should, check documentation for ng-readonly code.angularjs.org/1.2.15/docs/api/ng/directive/ngReadonly and there is a sample too.

Ali Eshghi · Accepted Answer · 2021-06-05 17:19:45Z

1

there is way which @Pavi mention to it, using fieldset :

<fieldset ng-disabled="true"> 
</fieldset >

but in my case that doesn't work so I changed it like this:

<fieldset  [attr.disabled]="true">
</fieldset >

worked perfectly.

answered Jun 5, 2021 at 17:19

Ali Eshghi

1,2432 gold badges16 silver badges35 bronze badges

Comments

grepit · Accepted Answer · 2015-08-14 20:29:51Z

Simple, create a variable for example "disableAll" and use ng-disabled="disableAll" in places where you want to control enable/disable. In below example, I modified your original code and you can enable and disable it by changing below line:

<div ng-init="disableAll=true" >

here is the code:

<div ng-controller='myCtrl'>

<div ng-init="disableAll=true" >
<form name="form" role="form" novalidate
class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength"
ng-submit="createStudy()" >



<div class="form-group" >
    <label>ID</label> <input type="text" class="form-control"
        name="id" ng-model="study.id" ng-disabled="disableAll">
</div>

<div class="form-group" >
    <label>Name</label> <input type="text" class="form-control"
        name="name" ng-model="study.name" ng-minlength=1
        ng-maxlength=50 ng-required="true"  ng-disabled="disableAll">
</div>



<div class="modal-footer">
   <a href="#/studies"><button type="button" class="btn btn-default"
        data-dismiss="modal" ng-click="clear()"   ng-disabled="disableAll">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
    </button></a>

    <button type="submit"   ng-disabled="disableAll"
        class="btn btn-primary">
        <span class="glyphicon glyphicon-save"></span> Save
    </button>
</div>

</form>
</div>
</div>

Adir Dayan · Accepted Answer · 2020-11-30 11:08:44Z

0

use [disabled] directive on <fieldset> instead of div

<fieldset [disabled]="isToDisable()"></fieldset>

Note:
to disabled included elements try to use also <fieldset> elements inside

answered Nov 30, 2020 at 11:08

Adir Dayan

1,6571 gold badge17 silver badges27 bronze badges

Collectives™ on Stack Overflow

disabling an entire div in angularjs

9 Answers 9

2 Comments

1 Comment

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

1 Comment

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related