チェックを入れたら入力可能になるテキストボックスをjQueryで実装する方法

チェックを入れたら入力可能になるテキストボックスをjQueryで実装する方法

チェックを入れたら入力可能になるテキストボックスをjQueryで実装する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

HTMLフォームで、チェックを入れた時だけ有効になるテキストボックスを実装する方法をご紹介いたします。

今回は例として、果物にチェックを入れたら個数が入力できるようになるフォームを作りたいと思います。

チェックを入れていないフォーム

以下のように、チェックを入れると個数の入力が可能になります。

入力可能になったテキストボックス

スポンサードリンク

チェックを入れたら入力可能になるテキストボックスをjQueryで実装する方法

まずはフォームをマークアップします。


<label><input type="checkbox" name="checkbox-1" id="checkbox-1" value="りんご">&nbsp;りんご</label> <input type="number" name="number-check1" id="number-check1" min="0" value=""> 個
<label><input type="checkbox" name="checkbox-2" id="checkbox-2" value="いちご">&nbsp;いちご</label> <input type="number" name="number-check2" id="number-check2" min="0" value=""> 個
<label><input type="checkbox" name="checkbox-3" id="checkbox-3" value="ばなな">&nbsp;ばなな</label> <input type="number" name="number-check3" id="number-check3" min="0" value=""> 個

今回は個数を入力してもらうので、inputのtype属性はnumberにしています。type属性をtextにしても問題ありません。

また、input要素には必ずIDを付与するようにしてください。jQuery側の制御で使います。

上記のようにマークアップしたら、</body>の直前に以下を記述します。


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
 $('#number-check1').attr('disabled', 'disabled');
 $('#number-check2').attr('disabled', 'disabled');
 $('#number-check3').attr('disabled', 'disabled');
 
 $('#checkbox-1').click(function() {
 if ($(this).prop('checked') == false) {
 $('#number-check1').attr('disabled', 'disabled');
 } else {
 $('#number-check1').removeAttr('disabled');
 }
 });

 $('#checkbox-2').click(function() {
 if ($(this).prop('checked') == false) {
 $('#number-check2').attr('disabled', 'disabled');
 } else {
 $('#number-check2').removeAttr('disabled');
 }
 });

 $('#checkbox-3').click(function() {
 if ($(this).prop('checked') == false) {
 $('#number-check3').attr('disabled', 'disabled');
 } else {
 $('#number-check3').removeAttr('disabled');
 }
 });
});
</script>

#number-check1~3は予め無効化しておいて、#checkbox-1~3にチェックが入ったら#number-check1~3の該当する箇所を有効にする、という処理になります。

「#number-check1~3」と「#checkbox-1~3」の部分は、フォームにつけたIDと合わせてください。

なお、WordPressで実装する場合は、以下のように「jQuery(function($)」を追加します。


<script>
jQuery(function($) {

$(function() {
 $('#number-check1').attr('disabled', 'disabled');
 $('#number-check2').attr('disabled', 'disabled');
 $('#number-check3').attr('disabled', 'disabled');
 
 $('#checkbox-cake1').click(function() {
 if ($(this).prop('checked') == false) {
 $('#number-check1').attr('disabled', 'disabled');
 } else {
 $('#number-check1').removeAttr('disabled');
 }
 });

 $('#checkbox-cake2').click(function() {
 if ($(this).prop('checked') == false) {
 $('#number-check2').attr('disabled', 'disabled');
 } else {
 $('#number-check2').removeAttr('disabled');
 }
 });

 $('#checkbox-cake3').click(function() {
 if ($(this).prop('checked') == false) {
 $('#number-check3').attr('disabled', 'disabled');
 } else {
 $('#number-check3').removeAttr('disabled');
 }
 });
});

});
</script>

あとがき

フォームが無効化されている場合の背景色の変更は、CSSで調整します。


input[type=number][disabled]{
 background: #eee;
}

「type=number」の部分は、設置したフォームのtype属性に合わせて変更してください。

今回は個数の入力で有効・無効を切り替えましたが、送信ボタンやテキストエリア等でも実装可能です。結構使えるシーンは多いのではないでしょうか。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。