How to disable button If I select NO in dropdown list

Question

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

that [@option_id@] is just a 1 and 2. meaning yes = 0, no = 1 — Pakalu Papito, Aug 10 '15 at 05:12
check my answer, it has working fiddle and explanation for future study. — VMcreator, Aug 10 '15 at 05:21

score 5 · Accepted Answer · answered Aug 10 '15 at 05:11

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>

score 2 · Answer 2 · edited Aug 10 '15 at 05:12

2

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;

edited Aug 10 '15 at 05:12

Guruprasad J Rao

29,410
14
101
200

answered Aug 10 '15 at 05:09

osk

71
4

score 1 · Answer 3 · answered Aug 10 '15 at 05:18

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.

score 0 · Answer 4 · answered Aug 10 '15 at 05:10

0

button

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

jquery

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

answered Aug 10 '15 at 05:10

Elyor

5,396
8
48
76

How to disable button If I select NO in dropdown list

4 Answers4

Linked