Aditi Patel Aditi Patel - 5 months ago 15
jQuery Question

Button enable disble on select dropdown Value

I have two Buttons:


  1. For bulk order

  2. For sample Order



By default both buttons are disabled when I click on the dropdown. Value "1" then "Sample order Btn" should be enabled and when I click on the dropdown value more then 1 "Buk Order" Btn should be enabled.

On select again both buttons should be disabled.
Here is my code on select element, it doesn't work and I don't know why.



$("select").on('change',function(){
if ($(this).find('option:selected').text()=="1"){
alert('1');
$("#product-addtocart-button").attr('disabled',true);
$("#product-addtocart-button1").attr('disabled',false);
}

if ($(this).find('option:selected').text()!="1" && $(this).find('option:selected').text()!="0"){
alert('25');
$("#product-addtocart-button1").attr('disabled',true);
$("#product-addtocart-button").attr('disabled',false);
}

if ($(this).find('option:selected').text()=="0"){
alert('sele');
$("#product-addtocart-button").attr('disabled',true);
$("#product-addtocart-button1").attr('disabled',true);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="productextra">
<option selected value="0">select</option>
<option value="1">1</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="750">750</option>
<option value="1000">1000</option>
</select>
<button type="button" id="product-addtocart-button" class="button btn-cart" disabled="disabled">
<span>
<span>Bulk Order</span>
</span>
</button>
<button type="button" id="product-addtocart-button1" class="button btn-cart select-change" disabled="disabled">
<span>
<span>Sample Order</span>
</span>
</button>




Answer

$("select").on('change', function() {

  console.log($('option:selected', this).text() == 0)
  console.log($('option:selected', this).val())
  $("#product-addtocart-button").attr('disabled', $('option:selected', this).val() > 1 || $('option:selected', this).val() == 0);
  $("#product-addtocart-button1").attr('disabled', $('option:selected', this).val() == 1 || $('option:selected', this).val() == 0);


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="productextra">
  <option selected value="0">select</option>
  <option value="1">1</option>
  <option value="25">25</option>
  <option value="50">50</option>
  <option value="75">75</option>
  <option value="100">100</option>
  <option value="150">150</option>
  <option value="200">200</option>
  <option value="250">250</option>
  <option value="300">300</option>
  <option value="400">400</option>
  <option value="500">500</option>
  <option value="750">750</option>
  <option value="1000">1000</option>
</select>
<button type="button" id="product-addtocart-button" class="button btn-cart" disabled="disabled"><span><span>Bulk Order</span></span>
</button>
<button type="button" id="product-addtocart-button1" class="button btn-cart select-change" disabled="disabled"><span><span>Sample Order</span></span>
</button>

Use value and compare to 1 or 0 depending on result disable or enable the button