在啟用按鈕之前，請驗證表單中是否填充了文本區域並進行了多次選擇單擊

Question

鏈接到相關的小提琴（當前從該stackoverflow 響應中獲取的javascript）： https : //jsfiddle.net/5qomb6fe/ 。

HTML

<body>
  <div class="container">
    <h5>Input Words and Make Selection</h5>
    <br>
    <form method='post'>
      <div class="row"></div>
      <textarea class="form-control" id="field" name="words" rows="12"></textarea>
      <br>
      <select class="form-control" id="type" multiple name="type" size="13">
        <option value="">Null</option>
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>
        <option value="Four">Four</option>
        <option value="Five">Five</option>
        <option value="Six">Six</option>
      </select>
      <br>
      <input class="btn btn-danger" name="button" type="submit" value="Submit", id="keybutton" disabled="disabled">
    </form>
  </div>

使用Javascript

(function() {
  $('form > textarea').keyup(function() {
    var empty = false;
    $('form > textarea').each(function() {
      if ($(this).val() == '') {
        empty = true;
      }
    });

    if (empty) {
      $('#keybutton').attr('disabled', 'disabled');
    } else {
      $('#keybutton').removeAttr('disabled');
    }
  });
})()

雖然這可以在填寫表單時有效地啟用按鈕，但我想知道如何在填寫表單並在多選中進行選擇后才能啟用按鈕。

我對javascript，jquery等的了解非常有限。 任何幫助表示贊賞。

Answer 1

檢查這個，或檢查片段。 我已經更新了代碼段，可以先選擇然后鍵入，然后啟用button反之亦然。

https://jsfiddle.net/5qomb6fe/5/

 (function() { function enabledButton(){ if(empty == false && selection == false){ $('#keybutton').removeAttr('disabled'); }else{ $('#keybutton').attr('disabled', 'disabled'); } } var selection = null; var empty = null; $('form > textarea').keyup(function() { $('form > textarea').each(function() { if ($(this).val()=='') { empty = true; }else{ empty = false; } }); enabledButton(); }); $('.selection').on('change',function(){ selection = false; enabledButton(); }); })()

 <style> body { padding-top: 20px; padding-left: 20px; padding-right: 20px; } th, td { padding: 1px; } </style>

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <h5>Input Words and Make Selection</h5> <br> <form method='post'> <div class="row"></div> <textarea class="form-control" id="field" name="words" rows="12"></textarea> <br> <select class="form-control selection" id="type" multiple name="type" size="13"> <option value="">Null</option> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> <option value="Four">Four</option> <option value="Five">Five</option> <option value="Six">Six</option> </select> <br> <input class="btn btn-danger" name="button" type="submit" value="Submit", id="keybutton" disabled="disabled"> </form> </div>

在啟用按鈕之前，請驗證表單中是否填充了文本區域並進行了多次選擇單擊

問題描述

1 個解決方案

解決方案1
0 已采納 2016-03-24 01:49:33

在啟用按鈕之前，請驗證表單中是否填充了文本區域並進行了多次選擇單擊

問題描述

1 個解決方案

解決方案1 0 已采納 2016-03-24 01:49:33

解決方案1
0 已采納 2016-03-24 01:49:33