为什么我的提交按钮被填充？

Question

我希望在启用提交按钮之前填写三个字段。下面的jquery是一种工作，但提交按钮被启用，即使并非所有三个字段都要填充，除了下拉列表选择。请不要介意这个烂摊子，我正在尝试几种不同的方式来调试这个，但我很茫然。如前所述，选择列表的工作原理应该如此。请查看jsfiddle示例。

http://jsfiddle.net/FPtCE/

HTML： --------- 高 中 低

<input class="required" id="id_title" name="title" placeholder="Please enter a title."  type="text" /> 

<textarea class="required" id="id_comment" name="comment" placeholder="Comment is required"> 
</textarea> 

<input id='submit' type="Submit" value="Submit Comment"> 

</form> 

的jQuery：

$(document).ready(function() { 
var val1 = false; 
var val2 = false; 
var val3 = false; 

$('input[id="submit"]').attr('disabled','disabled');       
    $('textarea[id="id_comment"]').keyup(function() { 
    if (val2 == false || val3 == false ||  (!$.trim($('textarea[id="id_comment"]').val())) && ($('textarea[id="id_comment"]').val() == '')) { 
     $('input[id="submit"]').attr('disabled','disabled'); 
     val1 = false; 
    alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3) 
    } 

    else{ 
    $('input[id="submit"]').removeAttr('disabled'); 
    val1 = true; 
    alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3) 
    } 
}); 

$('input[id="id_title"]').keyup(function() { 
    if (!$.trim($('input[id="id_title"]').val())){ 
    if (val1 == false && val3 == false){ 
    if ($('input[id="id_title"]').val() == ''){ 
     $('input[id="submit"]').attr('disabled','disabled'); 
     val2 = false; 
     alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3) 
    } 
    } 
    } 
     else if (!$.trim($('input[id="id_title"]').val())){ 
    if (val1 == false && val3 == false){ 
    if($('input[id="id_title"]').val() != '') { 
     $('input[id="submit"]').attr('disabled','disabled'); 
     val2 = true; 
     alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3) 
    } 
    } 
    } 
    else{ 
    $('input[id="submit"]').removeAttr('disabled'); 
    val2 = true; 
    alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3) 
    }                      
});                       

$('select[id="id_priority"]').change(function() { 
    if (val1 == false && val2 == false && ($('select[id="id_priority"]').val() == '')) { 
     $('input[id="submit"]').attr('disabled','disabled'); 
     val3 = false; 
     alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3) 
    } 
    else if (val1 == false && val2 == false && ($('select[id="id_priority"]').val() != '')) { 
     $('input[id="submit"]').attr('disabled','disabled'); 
     val3 = true; 
     alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3) 
    } 
    else{ 
    $('input[id="submit"]').removeAttr('disabled'); 
    val3 = true; 
    alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3) 
    } 
}); 

});  

Answer 1

检查这一点，如果这是你需要什么： -

Fiddle

function checkSubmit() { 

     $('#submit').prop('disabled', !((($('#id_priority').val() !== "") 
     && $('#id_title').val() !== "" 
     && $('#id_comment').val() !== ""))); 
    } 

最简单的版本： - Fiddle

$(document).ready(function() { 
    $('#submit').attr('disabled', 'disabled'); 
    $('#id_comment').keyup(checkSubmit); 
    $('#id_title').keyup(checkSubmit); 
    $('#id_priority').change(checkSubmit); 

    function checkSubmit() { 

     $('#submit').prop('disabled', !(($('#id_priority').val() !== "") 
         && $.trim($('#id_title').val()) !== "" 
         && $.trim($('#id_comment').val())!== "")); 
     } 
});