禁用表單提交按鈕輸入=文本和輸入=複選框與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

回答

相關問題