禁用表单提交按钮输入=文本和输入=复选框与jQuery

我有一个窗体有三个输入（[type=text]，多输入[type=checkbox]和禁用提交按钮）。我想要提交按钮被启用，如果用户有填写在所有三个文本输入和至少选中一个复选框。禁用表单提交按钮输入=文本和输入=复选框与jQuery

我发现这个拨弄它在所有三个文本输入的伟大工程，但我想添加的附加条件中的至少一个复选框必须选择：

$(document).ready(function() { 
    var $submit = $("input[type=submit]"), 
    $inputs = $('input[type=text], input[type=password]'); 

    function checkEmpty() { 
     // filter over the empty inputs 
     return $inputs.filter(function() { 
      return !$.trim(this.value); 
     }).length === 0; 
    } 

    $inputs.on('blur', function() { 
     $submit.prop("disabled", !checkEmpty()); 
    }).blur(); // trigger an initial blur 
});

fiddle

来源

2016-07-16 grusl83

更清晰的缩进和问题措辞。虽然没有重大变化 - 我认为这个问题已经很清楚了。 –

添加在复选框class="checkbox"然后修改checkEmpty()这样：

function checkEmpty() { 
    var text= $inputs.filter(function() { 
     return !$.trim(this.value); 
    }).length === 0; 
    var checkbox = false; 
    if ($(".checkbox:checked").length > 0) { 
     checkbox = true; 
    } 
    if(text == true && checkbox == true){ 
     return true; 
    }else{ 
     return false; 
    } 
}

然后加入ŧ他上点击复选框事件是：

$(".checkbox").on("click", function(){ 
    $submit.prop("disabled", !checkEmpty()); 
});

来源

2016-07-16 10:11:42

谢谢！它现在工作完美:) – grusl83

没问题，高兴地帮助:) –

@ grusl83如果它的你的正确解决方案，那么请接受答案:) – tinku

嘿只是添加输入只在jQuery的部分[类型=复选框]，这里是你想要的输出，试试下面的代码：的Index.html

<form method="POST" action=""> 
    User Name: <input name="Username" type="text" size="14" maxlength="14" /><br /> 
    hobbies:<input type="checkbox" name="cricket">Cricket<input type="checkbox" name="football">football<input type="checkbox" name="hockey">hockey<br> 
    <input type="submit" value="Login" name="Submit" id="loggy"> 
</form> 
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> 
<script> 
$(document).ready(function() { 
    var $submit = $("input[type=submit]"), 
     $inputs = $('input[type=text], input[type=checkbox]'); 

    function checkEmpty() { 
     return $inputs.filter(function() { 
      return !$.trim(this.value); 
     }).length === 0; 
    } 

    $inputs.on('blur', function() { 
     $submit.prop("disabled", !checkEmpty()); 
    }).blur(); 
}); 
</script>

来源

2016-07-18 13:17:50

好我现在有一个严重的问题。我使用WordPress和补充：

<?php wp_head(); ?> 
<?php wp_footer(); ?>

在我的header.php和footer.php，因为我需要他们这样一个插件是越来越加载。因为我加了他们Stephan Sutter的工作解决方案不再工作了。如果我填写所有必填表单，提交按钮仍然被禁用。如果我删除它，它再次工作，但我需要他们的插件。

我认为这是因为插件添加输入文本到页面。有什么办法可以使用代码frm Stephan为一个定义的表单ID =＃addmovie-form？

来源

2016-07-19 17:58:42 grusl83

禁用表单提交按钮输入=文本和输入=复选框与jQuery

回答

相关问题