Jquery禁用启用按钮,下拉选项

时间:2010-09-20 14:10:37

标签: jquery forms drop-down-menu

我有一个下拉菜单,我想在选择某个值时禁用/启用页面上的按钮。它适用于IE7及以下版本的所有浏览器。有工作吗?

代码:

<script type="text/javascript">
$(document).ready(function() {

//Start Buttons
        $(".nextbutton").button({ disabled: true });
        (".nextbutton").click(function() { $("#phonetypeform").submit() });

//Enable Next Step
    $('.enablenext').click(function(){
            $(".nextbutton").button("enable");
                }); 

//Disable Next Step
    $('.disablenext').click(function(){
            $(".nextbutton").button("disable");
                }); 

});
</script>

<form>
      <select name="porting-p1"class="dropdown">
<option value="" class="disablenext">Please select an option...</option>
<option value="1" class="enablenext">I want to keep my current phone number</option>
<option value="2" class="enablenext">I want to choose a new number</option>
        </select>

</form>

<button class="nextbutton">Next Step</button> 

2 个答案:

答案 0 :(得分:2)

IE7似乎不喜欢<option>标签上的点击事件。

这是一个简短的demo,应该可以使用change()事件为您服务。

$(document).ready(function() {

    $(".nextbutton").button({ disabled: true });

    $('.dropdown').change(function() {
        if ($('.dropdown').val() == 0) {
            $(".nextbutton").button({ disabled: true });
        } else {
            $(".nextbutton").button({ disabled: false });
        }
    });

});

答案 1 :(得分:1)

你试过吗

$(".nextbutton").attr("disabled", "disabled");

$(".nextbutton").removeAttr("disabled");

HTH