在jQuery中单击按钮后如何禁用下拉菜单

Question

我有一个包含货币值的下拉菜单，并且新页面加载了所选货币作为URL中的值。 其代码如下：

<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>

我在页面上使用simplecart.js添加了另一个添加产品按钮。 按钮代码如下：

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

我希望用户单击addcart按钮后禁用上述货币下拉菜单，以使他无法再次从下拉菜单中更改货币。

我正在使用jQuery。
在jQuery中这怎么可能？

更新：

我需要禁用的选项才能在所有页面上持久保存 ....

提前致谢。

Answer 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);
   });
});

Answer 2

请尝试以下操作：

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>

Answer 3

$('.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);
        */
    });
});