我启用/禁用表单中的提交按钮的以下功能。这三个都是分开工作,但如果可能的话,如何将它们合并为一个?
现在,如果我选择了一个选项和一个复选框,则该按钮已启用,但如果我取消选择一个选项,则会再次禁用提交按钮,但如果选中一个复选框或选项或一个字段,我想让他启用填写。
$('#order input[type="text"]').change(function(){
if(($(this).val().length > 0))
$('#submit').prop('disabled', false);
else
$('#submit').prop('disabled', true);
});
$('#order :checkbox').change(function(){
if($(this).not('.others').is(':checked'))
$('#submit').prop('disabled', false);
else
$('#submit').prop('disabled',true);
});
$('#order select').not('#sel_option_img').change(function(){
if($(this).val() != '')
$('#submit').prop('disabled', false);
else
$('#submit').prop('disabled',true);
});
});
对不起我的英语,也许不完美。
提前感谢您的帮助。
修改
链接到小提琴以便更好地理解:
答案 0 :(得分:0)
试试这个:
var orderText = $('#order input[type="text"]');
var orderCheck = $('#order :checkbox');
var orderSelect = $('#order select').not('#sel_option_img');
var enableOrDisableSubmit = function() {
var textEntered = orderText.val().length > 0;
var orderChecked = orderCheck.not('.others').is(':checked');
var orderSelected = orderSelect.val() != '';
if (textEntered && orderChecked && orderSelected)
$('#submit').prop('disabled', false);
else
$('#submit').prop('disabled', true);
};
orderText.change(enableOrDisableSubmit);
orderCheck.change(enableOrDisableSubmit);
orderSelect.change(enableOrDisableSubmit);
请注意,我们将jQuery引用分配给变量,这样我们就可以多次使用它们,而不必每次都遍历DOM。
答案 1 :(得分:0)
看一下:
<强>更新:强>
html更改:<option value="0">--please select--</option>
检查所有输入的功能:
function checkinputs() {
// if the select is defauld OR we have text inputs empty OR we dont have even one checkbox checked
if( $("#order select").val() == "0" || $('#order input[type="text"]').filter(function(){return this.value == ""}).length || !$('#order input[type="checkbox"]').is(':checked') ) {
$('#submit').prop('disabled', true);
} else {
$('#submit').prop('disabled', false);
}
}
change
的简单input
和"#order"
事件:
$( "#order" ).on('change input',function() {
checkinputs();
});