ボタンを有効にする前に、テキストエリアが入力され、フォーム内で複数選択されたことを確認してください。

関連するフィドル（現在のjavascriptはこのstackoverflowから取得しましたresponse）：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などの知識はかなり限られています。どんな助けもありがとうございます。

出典

2016-03-24 rigmarole

質問とは何の関係もない何かをあなたの質問をタグ付けしないでください。編集されました。ありがとう。 – Sparky

これをチェックするか、スニペットをチェックしてください。私はすでにスニペットを更新しました。最初に選択してからbuttonをタイプするとこれが有効になります。

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

(function() { 
 
function enabledButton(){ 
 
\t \t 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()=='') { 
 
     \t empty = true; 
 
     }else{ 
 
     \t 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>

出典

2016-03-24 01:49:33 mmativ

は魅力的に機能します！複数の選択ボックスがある場合は、これもうまくいくようです：https://jsfiddle.net/mx9s74Lu/1/ – rigmarole

編集：** this ** works：https://jsfiddle.net/164nqyce/1/。上記はしません – rigmarole

ボタンを有効にする前に、テキストエリアが入力され、フォーム内で複数選択されたことを確認してください。

答えて

関連する問題