How to disable a dropdown menu after a button click in jQuery

Question

I have a dropdown menu containing currency values, and a new page loads with the selected currency as a value in the URL. The code for that is as follows:

<div id="procurselect">
    <a href="javascript:void(0)" id="chosedCur"><?php echo $curr ; ?></a>
    <ul style="display: none;">
        <li><a rel="nofollow" title="Euro" onclick="set_currency('http://www.example.com/product.php?pid=<?php echo " $pid " ;?>&cur=EUR');" href="javascript:void(0)" target="_top" rel=nofollow>EUR</a>
        </li>
        <li><a rel="nofollow" title="Pound Sterling" onclick="set_currency('http://www.example.com/product.php?pid=<?php echo " $pid " ;?>&cur=GBP');" href="javascript:void(0)" target="_top" rel=nofollow>GBP</a>
        </li>
        <li><a rel="nofollow" title="Canadian Dollar" onclick="set_currency('http:/www.example.com/product.php?pid=<?php echo " $pid " ;?>&cur=CAD');" href="javascript:void(0)" target="_top" rel=nofollow>CAD</a>
        </li>
        <li><a rel="nofollow" title="Australian Dollar" onclick="set_currency('http://www.example.com/product.php?pid=<?php echo " $pid " ;?>&cur=AUD');" href="javascript:void(0)" target="_top" rel=nofollow>AUD</a>
        </li>
        ........(cont....)
    </ul>
</div>
<script>
    imitSelect.show({
        Target: $('#procurselect'),
        Width: 30
    });
</script>

I have another add product button on my page using simplecart.js. The button code is as follows:

<a class="item_add" href="javascript:;">
    <img src="images/addtocart.png" alt="Add to Cart" width="197" height="58" />
</a>

I want the above currency dropdown to be disabled once a user clicks on the addcart button so that he cannot change the currency again from the dropdown.

I am using jQuery.
How is this possible in jQuery?

Update:

I need the disabled option to persist on all pages....

Thanks in advance.

MarmiK · Accepted Answer · 2014-07-16 09:11:19Z

2

Try the following:

HTML:

<a class="item_add" onclick="disableDropdown()">
  <img src="images/addtocart.png" alt="Add to Cart" width="197" height="58">
</a>

JavaScript:

<script>
  function disableDropdown(){
    $("#procurselect").attr('disabled','disabled');
    //or another option
    $("#procurselect").css('pointer-events','none'); // this makes it unclickable
    //or another option
    $("#procurselect").prop( "disabled", true );
  }
</script>

edited Jul 16, 2014 at 9:11

MarmiK

5,8156 gold badges47 silver badges51 bronze badges

answered Jul 16, 2014 at 8:56

Kishor Sawant

881 silver badge10 bronze badges

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

7 Comments

user3790186 Over a year ago

..It is working except that when we go to another page. It is getting enabled again...It should persist on another page..How is that possible ??

user3790186 Over a year ago

Sorry, i did not understand. Unless it is disabled permanently user can change currency again on another page...How to add class to procurselect ??

Kishor Sawant Over a year ago

when you go to another page, you can check is that div is enabled or disabled. depending on that set enabled or disabled property on onload page event.

user3790186 Over a year ago

How can it be possible without using cookies or sessions ??

Kishor Sawant Over a year ago

It does not related to session or cookies..plain js

|

david9 · Accepted Answer · 2014-07-16 08:52:26Z

1

$(document).ready(function(){
   $(".item_add").click(function(e){
     e.preventDefault();

     //jQuery (< 1.7):

     //This will disable just the div
     $("#procurselect").attr('disabled','disabled');

     //OR

     //This will disable everything contained in the div
     $("#procurselect").children().attr("disabled","disabled");

     //jQuery (>= 1.7):

     //This will disable just the div
     $("#procurselect").prop('disabled',true);

     //OR

     //This will disable everything contained in the div
     $("#procurselect").children().prop('disabled',true);
   });
});

answered Jul 16, 2014 at 8:52

david9

1699 bronze badges

1 Comment

sohaiby Over a year ago

Just a caution note: The selected value of dropdown won't submit to server if you set it to disabled. I found the other solution $("#procurselect").css('pointer-events','none'); // this makes it unclickable more useful

Quentin Engles · Accepted Answer · 2014-07-16 09:06:50Z

0

$('.item_add').click(function(){
    var pro = $('#procurselect ul li');
    pro.each(function(){
        //Now you have no onlick handler.
        this.onclick = null;
        /*you can also
        this.setAttribute('disabled', true);
        */
    });
});

answered Jul 16, 2014 at 9:06

Quentin Engles

2,8421 gold badge23 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to disable a dropdown menu after a button click in jQuery

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related