CODEWITHSUNDEEP
javascriptjquery
Pakalu Papito
Pakalu Papito

Reputation: 31

How to disable button If I select NO in dropdown list

The code is simply like this:

<select id="productextra[@count@]">
<option value="[@option_id@]">Yes</option>
<option value="[@option_id@]">No</option>
</select>

The button should be disable is: Add to cart

Upvotes: 1

Views: 12915

Answers (4)

VMcreator
VMcreator

Reputation: 843

Your HTML should be like this:

<select id="productextra0">
<option value="0">Yes</option>
<option value="1">No</option>
</select>

<button type="submit" id="submit-button">Add to cart</button>

and javascript:

window.onload=function()
{
    document.getElementById("productextra0").onchange=function()
    {
        if(this.options[this.selectedIndex].value==1)
        {
            document.getElementById("submit-button").disabled=true;
        }
        else
        {
            document.getElementById("submit-button").disabled=false;
        }
    }
}

here is the working demo

I added an id for the add to cart button so it can easily be accessed via javascript document.getElementById, now I added event handler for dropdown onchange event, this means a function will trigger every time the dropdownchanges value. When dropdown change its value the function will check if its equal to 1 then it will disable your add to cart button, else it will enable it back.

I also put the function into windows.onload so that we can ensure that onchange function will only be attached to your dropdown when its ready or already been created by the browser.

Upvotes: 1

osk
osk

Reputation: 71

var sel = document.getElementById('productextra');
var sv = sel.options[sel.selectedIndex].value;

This will give the value of selected option in which you can disable the button using 

document.getElementById("myBtn").disabled = true;

Upvotes: 2

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Write an onchange event for your select and find the selected value

<button id="btnSubmit" type="submit">Add to cart</button>

JS

$("select").on('change',function(){
   if($(this).find('option:selected').text()=="No")
       $("#btnSubmit").attr('disabled',true)
   else
       $("#btnSubmit").attr('disabled',false)
});

Sample Snippet 

$("select").on('change',function(){
   if($(this).find('option:selected').text()=="No")
       $("#btnSubmit").attr('disabled',true)
   else
       $("#btnSubmit").attr('disabled',false)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="productextra[@count@]">
<option value="[@option_id@]">Yes</option>
<option value="[@option_id@]">No</option>
</select>
<button id="btnSubmit" type="submit">Add to cart</button>

Upvotes: 5

Elyor
Elyor

Reputation: 5532

button

<button id="btn" type="submit">Add to cart</button>

jquery

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

Upvotes: 0

Related Questions