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())!== ""));
         }
});

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

1 个答案: