Semantic UI dropdown not able to disable using select input + AngularJS

Question

I'm trying to disable a dropdown depending of a value of a different input. I'm working with Semantic UI and Angular.

This is my HTML

<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
        ng-options="option.value as option.text for option in question.options"
        ng-model="question.answer"
        ng-disabled="!question.isEnable">
</select>

And this is how is rendered

    <div class="ui search dropdown ng-pristine ng-untouched ng-valid selection">
    <select ng-attr-id="{{'dd-' + question.id}}" ng-options="option.value as option.text for option in question.options" ng-model="question.answer" ng-disabled="!question.c_questionIsEnable" id="dd-483" disabled="disabled">
    <option value="" class="" selected="selected"></option>
    <option label="Yes" value="string:213">Yes</option>
    <option label="No" value="string:214">No</option>
    <option label="Does not apply" value="string:547">Does not apply</option>
    </select>
    <i class="dropdown icon"></i><input class="search" autocomplete="off" tabindex="0">
<div class="text"></div><div class="menu transition hidden" tabindex="-1">
<div class="item selected" data-value="string:213">Yes</div>
<div class="item" data-value="string:214">No</div>
<div class="item" data-value="string:547">Does not apply</div>
</div>
</div>

As you can see in the rendered code the disabled attribute is present in the <select>, nevertheless the dropdown is not disabled. Reading the Semantic UI docs, there is a way to set a dropdown in a disable state using the css class disabled but is not working either (the css class is added to the <select>)

HTML code with using class

<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
            ng-options="option.value as option.text for option in question.options"
            ng-model="question.answer"
            ng-class="{'disabled': !question.isEnable}">
    </select>

Indeed, the class disabled is added to the select input but the dropdown is not disabled, using Chrome Dev Tools, the element gets disabled if I add the class in the following line

<div class="ui search dropdown ng-pristine ng-untouched ng-valid selection disabled">

Is there a way for make this work using <select>?.

Thanks in advance.

Manuel Espino · Accepted Answer · 2016-05-05 17:36:33Z

1

There is an easy way to do this.

Wrapping the in a with the field css class, and use the ng-class attribute in there.

Hope this could help.

<div class="ui field" ng-class="{'disabled': !question.isEnable }"> 
<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
        ng-options="option.value as option.text for option in question.options"
        ng-model="question.answer">
</select>
</div>

answered May 5, 2016 at 17:36

Manuel Espino

2733 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Semantic UI dropdown not able to disable using select input + AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related