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
精彩评论