开发者

JQuery enable button based on select

I have a page that contains a collection of select's that are used to identify the columns in a text file. Each time a user identifies a column the selected option is removed from the other selects on the page. When the user has identified all columns the "submit" input needs to be activated so the user can mov开发者_如何学编程e to the next step. I need a cleaver way to determine when all of the columns have been selected.

<script type="text/javascript" src="https://www.repfolio.com/Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="https://www.repfolio.com/Scripts/jquery.selectboxes.min.js"></script>
<script type="text/javascript">
    $(document).ready(
        function() {
            $('.ct').bind('change', function() { updateControls(this); });
        }
    );
    function updateControls(c) {
        $('.ct').unbind();
        if ($(c).val() == 'Reset') {
            var opt = $(c).find("option[value!='Reset']");
            // if there are selects with value = '' then add this option back to them -- need to address this select too
            if ($(".ct").filter("[value='']").size() > 0) {
                $(".ct").filter("[value='']").each(function() {
                    $(this).append($("<option></option>").attr("value", $(opt).val()).text($(opt).text()));
                });
                var options = $(".ct").filter("[value='']:first").children().clone();
                $(c).find('option').remove();
                $(c).append($(options));
            } else {
                $(c).find('option').remove();
                $(c).append($("<option></option>").attr("value", "").text("-- Select Column -"));
                $(c).append($("<option></option>").attr("value", $(opt).val()).text($(opt).text()));
            };
        } else {
            var s = $(c).children().filter('option[selected=true]');
            $(c).find('option').remove();
            $(".ct option[value='" + $(s).val() + "']").each(function() { $(this).remove(); });
            $(c).append($("<option></option>").attr("value", $($(s)).val()).text($(s).text()));
            $(c).append($("<option></option>").attr("value", "Reset").text("Reset"));
        }
        $(".ct").filter("[value='']").sortOptions()
        $('.ct').bind('change', function() { updateControls(this); });
        if ($('select.ct option:nth-child(3)').length)
            $('#submit').attr('disabled', 'enabled');
    };
</script>

This is the section that enables the button:

if ($('select.ct option:nth-child(3)').length)
            $('#submit').attr('disabled', 'enabled');


$('#submit').attr('disabled', 'enabled');

disabled attribute can be set only with 'disabled'. And if you want to enable a button you just set an empty string like this :

$('#submit').attr('disabled', ''); 

But in this case I recommend you use ".prop" :

$('#submit').prop('disabled', false);

You can read more about the difference between ".prop" and ".attr" in the jQuery.api

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜