How to disable select control?

[markatbdex]

Is there an example on how to disable select control?

[john-oc]

Sorry for the late reply. A disabled option isn't something I've put in there as yet. I'll see if I can add it in soon.

[ipedersen]

I found a fairly simple solution for disable that works great. Maybe you will consider using it. Enabled: Disabled:

First is 1 addition and 2 changes to acute.select.css

.ac-select-text {
   ....
   outline: none;
}
.ac-select-disabled {
   color: #a1a1a1;
   cursor: default;
}

Then 3 additions to acute.select.js to disable the dropdown from appearing.

$scope.togglePopup = function() {
   if ($scope.settings.disabled) { return; }
   ....
};
var defaultSettings = {
   ....
   "allowClear": true,
   "disabled":false
};

And finally 4 additions to acute.select.htm

<!-- Added "ng-style" to disable outline -->
<div class="ac-select-wrapper" ng-keydown="keyHandler($event)" tabindex="999" ac-focus="wrapperFocus" ng-focus="comboFocus = true" ng-style="{outline : ((settings.disabled) && 'none') || 'initial'}">
    <div ng-class="{'ac-select-main':true, 'ac-select-main-closed':!popupVisible, 'ac-select-main-open':popupVisible}" ng-click="mainClick($event)"
      ng-style="{'minWidth': settings.minWidth }">
        <table class="ac-select-table" ng-click="togglePopup($event)">
            <tr>
<!-- Added "ng-class" to apply "ac-select-disabled" class to displayed values -->
                <td ng-class="{'ac-select-disabled':settings.disabled}" class="ac-select-display">
                    <div class="ac-select-text-wrapper" ng-show="settings.comboMode">
                        <input type="text" class="ac-select-text" ng-model="comboText" ac-focus="comboFocus" ac-select-on-focus ng-change="comboTextChange()"
                            placeholder="{{settings.placeholderText}}" watermark="{{settings.placeholderText}}" />
                    </div>
                    <span ng-hide="settings.comboMode">{{confirmedItem.text}}</span>
                </td>
<!-- Added "ng-style" to hide dropdown image when disabled -->
                <td class="ac-select-image" ng-style="{display : ((settings.disabled) && 'none') || 'initial'}"></td>
            </tr>
            <!--Row to get the control width right, using the original select or the longest item text. Hidden at runtime.-->
            <tr class="ac-select-widener">
<!--                 <td class="ac-select-longest">&nbsp;{{longestText}}</td> -->
                 <td class="ac-select-longest"></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div class="ac-select-popup" ng-show="popupVisible" ng-style="{'minWidth': settings.minWidth }">
        <div class="ac-select-search-wrapper" ng-hide="settings.comboMode || !settings.showSearchBox">
            <table>
                <tr>
                    <td>
<!-- And finally added "ng-disabled" to disabled the input box -->
                        <input type="text" ng-disabled="modifying" class="ac-select-search" ng-model="searchText" placeholder="search" ac-focus="searchBoxFocus" ac-select-on-focus
                            ng-change="findData()" ng-keydown="keyHandler($event)" />
                    </td>
                    <td class="ac-select-add" ng-class="{ 'ac-select-disabled': matchFound }" title="Add" ng-show="settings.allowCustomText" ng-click="addButtonClick()">
                        <div>+</div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="ac-select-no-items" ng-show="noItemsFound">{{settings.noItemsText}}</div>
        <div class="ac-select-list" ng-style='{ "height": (listHeight + 6) + "px" }' ac-scroll-to="scrollTo" ac-on-scroll="listScrolled()">
            <ul>
                <li id="{{item.id}}" ng-repeat="item in items | filter: search" 
                    ng-class="getItemClass($index)" ng-click="itemClick($index)" ng-style="{ height: settings.itemHeight + 'px', 'line-height': settings.itemHeight + 'px' }">
                    {{item.text}}
                </li>
            </ul>
            <div class="ac-select-loading" ng-show="loading" ng-style="{ height: settings.itemHeight + 'px'}">Loading...</div>
        </div>
        <div class="ac-select-load-more" ng-show="allDataLoaded===false">
            {{items.length}} items<!-- of {{matchingItemTotal}}--> 
            <span ng-click="loadMore()">{{loadMessage}}</span>
        </div>
    </div>
</div>