JQuery: disable button if select option has certain class

Question

I have dropdown list with collection options. When option with certain class is selected I want submit button to be disabled. This is what I've tried to do:

<form id="addToCollection">
   <select id="add_to_collection">
       <option value="1" class="highlight">1</option>
       <option value="2">1</option>
       <option value="3">3</option>
   </select>
    <input  id="add-object-to-collection"
    type="submit" value="Add" class="button"/>
</form>
<input  id="add-object-to-collection" type="submit" value="Add" class="button"/>

if($('#add_to_collection option').hasClass('highlight')) {
  $("#add-object-to-collection").prop('disabled', true);
  $("#add-object-to-collection").attr('value', 'Added');
} else {
  $("#add-object-to-collection").prop('disabled', false);
  $("#add-object-to-collection").attr('value', 'Add');
}

So here, when option 1 is selected I want button to be disabled and when other options are selected button be enabled. However here button is disabled for all options.

Oleksandr T. · Accepted Answer · 2015-11-23 16:11:16Z

1

Try this

$('#add_to_collection').on('change', function () {
  var $option = $('option:selected', this);
  var $button = $('#add-object-to-collection');
  
  if ($option.hasClass('highlight')) {
    $button.prop('disabled', true).val('Added');
  } else {
    $button.prop('disabled', false).val('Add');
  }
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="addToCollection">
  <select id="add_to_collection">
    <option value="1" class="highlight">1</option>
    <option value="2">1</option>
    <option value="3">3</option>
  </select>
  
  <input  id="add-object-to-collection" type="submit" value="Add" class="button" />
</form>

answered Nov 23, 2015 at 16:11

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

Comments

Josh Crozier · Accepted Answer · 2015-11-23 16:21:42Z

Your code is almost working. The problem in your case is that you aren't checking to see if the selected option element has a class of highlight. You could use the :selected selector in order to select the selected option element. In addition, you would also need to wrap that logic within a change event callback.

You could simplify the code to the following:

This essentially listens to the change event, and determines whether the selected option element has the class highlight. The boolean is used to disabled/enable the corresponding button.

I also chained a .change() event so that the event would be fired initially.

Example Here

$('#add_to_collection').on('change', function () {
   var hasClass = $(this).find(':selected').hasClass('highlight');
   $('#add-object-to-collection').prop('disabled', hasClass).val(hasClass ? 'Added' : 'Add');
}).change();

$('#add_to_collection').on('change', function () {
   var hasClass = $(this).find(':selected').hasClass('highlight');
   $('#add-object-to-collection').prop('disabled', hasClass).val(hasClass ? 'Added' : 'Add');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="addToCollection">
    <select id="add_to_collection">
        <option value="1" class="highlight">1</option>
        <option value="2">1</option>
        <option value="3">3</option>
    </select>
    <input id="add-object-to-collection" type="submit" value="Add" class="button" />
</form>

Collectives™ on Stack Overflow

JQuery: disable button if select option has certain class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related