CODEWITHSUNDEEP
javascriptdrop-down-menusemantic-ui
Jerryc
Jerryc

Reputation: 310

semantic ui how to enable or disable a dropdown with javascript

I have some dropdown boxes in my webpage. I want user to select them one by one, update next dropdown options based on this dropdown selected option. I use semantic ui so it looks better and have a searching function. I know semantic ui have a class to make dropdown disabled.

My problem is how can i enable or disable the dropdowns with javascript. I tried adding or removing the class, but it does not work. or it is not possible to do that?

<select name="subject" id="subject" class="ui search dropdown disabled" >
    <option value="">Subject</option>
</select>

$('#subject').removeClass('disabled');

Upvotes: 4

Views: 16359

Answers (8)

ParMesSoins
ParMesSoins

Reputation: 1

My solution (for me)

<div class="ui three column grid">
<div class="row">
    <div class="five wide column">
        <div class="ui fluid labeled input">
            <div class="ui label"> Statut </div>
            <select class="ui fluid corner selection dropdown" name="statut" id="statut" required/>
                <option value="">Statut</option>
                <option value="Titulaire">Titulaire</option>
                <option value="Contractuel ou Stagiaire">Contractuel / Stagiaire</option>
            </select>
              <div class="ui corner orange label">
                <i class="asterisk icon"></i>
              </div>
        </div>
    </div>
    <div class="five wide center aligned column">
        <div class="ui fluid labeled input">
            <div class="ui label"> Origine </div>
            <div class="ui selection dropdown" name="MinOri" id="MinOri" required>
              <input type="hidden">
              <i class="dropdown icon"></i>
              <div class="default text">Origine</div>
              <div class="menu">
                <div class="item" data-value="value1">value1</div>
                <div class="item" data-value="value2">value2</div>
              </div>
              <div class="ui corner orange label">
                <i class="asterisk icon"></i>
              </div>
            </div>              
        </div>
    </div>
</div>
</div>
<script>
    document.getElementById('statut').addEventListener('change', function() {
        if (this.value == 'Titulaire') {
            document.getElementById("MinOri").classList.remove("disabled");
        } else {
            document.getElementById("MinOri").classList.add("disabled");
        }
    });
</script>

Upvotes: 0

pbarney
pbarney

Reputation: 2833

If you're trying to disable the input so that it won't be posted on a form submit, then you need to also disable the select element in the dropdown by adding the "disabled" property:

$('.ui.dropdown select').prop('disabled', true);

If you only add a .disabled class to the dropdown, you won't be able to select a different value, but the value it will still be posted on form submit. If that's what you want, then one of the answers is all you need.

But again, to disable the form control and prevent a form post, you have to do both:

$('.ui.dropdown').addClass('disabled');
$('.ui.dropdown select').prop('disabled', true);

Upvotes: 0

Gamaliel
Gamaliel

Reputation: 465

Good explained Sachin. As you say using Semantic UI aparently is not enough to enable or disable with .prop("disabled", true) or .prop("disabled", false); As in my situation I used more than one dropdown, it turned out as follows..

First disable the Dropdowns by element id:

$("#person_state_id").prop("disabled", true);
$("#person_city_id").prop("disabled", true);

And when I want to enable, using .parent() or .parent('div') same results.

$("#person_state_id").parent('div').removeClass('disabled');
$("#person_state_id").prop("disabled", false);
$("#person_city_id").parent().removeClass('disabled');
$("#person_city_id").prop("disabled", false);

In some cases I did it in the following "generic" way.

$(".field.disabled").removeClass("disabled");

or more specific:

$(".field.city").removeClass("disabled");

I had to inspect the html elements and work with the form view, because when enabling and disabling the affected one was the <div class = "field">, Total, it all depends on how you have your View.

My form view: ...

      <div class="field country">
        <%= form.label :country_id %>
        <%= form.collection_select :country_id, @countries,:id, :name, options = {:prompt => 'Please select a Country...'},
        html_options = {class: "ui fluid search selection dropdown"}%>
      </div>
    
      <div class="field state">
        <%= form.label :state_id %>
        <%= form.collection_select :state_id, @states, :id, :name, {:prompt => 'Please select a Country first...'},
        html_options = {class: "ui fluid search selection dropdown"} %>
      </div>
    
      <div class="field city">
        <%= form.label :city_id %>
        <%= form.collection_select :city_id, @cities, :id, :name, {:prompt => 'Please select a Country and State first...'},
        html_options = {class: "ui fluid search selection dropdown"} %>
      </div>

...

Sorry, thats what I have. I know its sounds weirdo, but Thats the way works for me.

Welcome any another suggestion, I'm kinda lost with this subject too.

Upvotes: 0

Sachin
Sachin

Reputation: 31

I tried all the solutions mentioned here but nothing did work.

Reason

Behind the scene, semantic-ui generates a dropdown on runtime, and your HTML select tag is put inside that generated HTML div. Hence $('.ui.dropdown').addClass("disabled"); only disable the inner HTML not the actual piece of HTML code that renders that dropdown to user.

Solution

Hence to disable the dropdown (outer HTML tag) do the following:

$('.ui.dropdown').parent().addClass("disabled");

Upvotes: 1

0190198
0190198

Reputation: 1717

If in case anybody wanted to enable dropdown which was disabled

To disable dropdown

$('.ui.dropdown').addClass("disabled");

To enable dropdown back

$('.ui.dropdown').removeClass("disabled");

Upvotes: 2

Anwar Hossain
Anwar Hossain

Reputation: 696

The jquery way works. here is an example...

$('.dropdown').dropdown();

$('.ui.dropdown').addClass("disabled");

https://jsfiddle.net/anwar3606/n31xsjzn/

Upvotes: 6

kizeloo
kizeloo

Reputation: 183

Here is the jQuery way:

$("#subject").prop("disabled", true);

Upvotes: 1

EternalMonologue
EternalMonologue

Reputation: 41

mfunction disable() {document.getElementById("mySelect").disabled=true; } function enable() {document.getElementById("mySelect").disabled=false; }

That should be able to enable and disable a dropdown box. Now all you need to do is read the answer and enable/disable accordingly.

var a = document.getElementById("thedropdown"); alert(a.options[a.selectedIndex].value);

should get you the value of the dropdown menu if it is set up like

<select id="thedropdown"> <option value="1">one</option> <option value="2">two</option> </select>

Upvotes: 1

Related Questions