1

I am trying to create a div that has a bunch of disabled fields. They get enabled on clicking anywhere in the div.

I find that clicking anywhere in the div causes ng-click to be fired, while clicking on a dropdown that is disabled does not seem to fire ng-click. Here's an example.

http://jsfiddle.net/sJZf7/9/

Javascript: 

var app = angular.module('App', []);
function ctrl($scope) {
    $scope.disabled = true;
    $scope.enable = function () {
        $scope.disabled = false;
    }
}

What is going on?

Vinay Venu
  • 110
  • 2
  • 7
  • 2
    possible duplicate of [Event on a disabled input](http://stackoverflow.com/questions/3100319/event-on-a-disabled-input) – Karlen Kishmiryan Aug 19 '14 at 10:25
  • I don't think you can fire mouseevents on an disabled element. – Mritunjay Aug 19 '14 at 10:25
  • 1
    You can't fire events on disabled element. A possible work around: Change the default action for that event and change the style of the element, so it will look like disabled. – Karlen Kishmiryan Aug 19 '14 at 10:27
  • @Mritunjay - If that is the case, why does it work on the text input? Also, the event listener is on the div, not the select. – Vinay Venu Aug 19 '14 at 10:42

3 Answers3

3

You can't fire events on disabled elements. I would use CSS :after pseudo-element to create a disabled overlay, which can be clicked:

<div ng-click="enable()" ng-class="{'disabled': disabled, 'enabled': !disabled}">
    <select ng-disabled="disabled">
        <option>Disabled DropDown</option>
    </select>
    <input type="text" ng-disabled="disabled" size="100" placeholder="Click here to enable the dropdown" />
</div> 

.disabled {
    position: relative;
}
.disabled:after {
    position: absolute;
    content:'';
    width: 100%;
    height: 100%;
    opacity: .3;
    background: yellow;
    top: 0;
    left: 0;
}

Fiddle here: http://jsfiddle.net/sJZf7/11/

o--oOoOoO--o
  • 770
  • 4
  • 7
0

You can find a jsfiddle that solves your problem here.

html

<h2>
    The dropdown gets enabled if I click anywhere other than the disabled dropdown
</h2>
<div ng-app="App" ng-controller="ctrl" style="border: 10px solid black;">
     <div>
        <select ng-disabled="disabled">
            <option>Disabled DropDown</option>
        </select>
        <input type="text" ng-click="enable();" size="100" placeholder="Click here to enable the dropdown" />
        <select>
            <option>Enabled dropdown</option>
        </select>
    </div>
</div>

javascript

var app = angular.module('App', []);

function ctrl($scope) {
    $scope.disabled = true;
    $scope.enable = function (disabled) {
        $scope.disabled = false;
    }
}
enrico.bacis
  • 30,497
  • 10
  • 86
  • 115
Archana
  • 387
  • 1
  • 5
-2

It was working like that because the box model on which you assigned enable function was the whole div

I've changed your fiddle with minimal impact to make it work

http://jsfiddle.net/sJZf7/10/

<select ng-disabled="disabled">
  <option>Disabled DropDown</option>
</select>
<label ng-click="enable()"><input type="text" ng-disabled="disabled" size="100" placeholder="Click here to enable the dropdown" /></label>
<select>
  <option>Enabled dropdown</option>
</select>
maurycy
  • 8,455
  • 1
  • 27
  • 44