2016年11月28日
【WordPressプラグイン】「MW WP Form」でチェックを入れたら入力ができるようになる項目を作成する方法
簡単にフォームが作成でき、確認・完了画面や入力エラーメッセージのカスタマイズ、ファイルの送信機能などなど、いつも大変お世話になっているフォーム作成プラグイン「MW WP Form」。
同意した方のみ入力をさせる等、チェックボックスにチェックを入れた場合のみに、入力できる項目を作成する方法をメモメモ。
▼管理画面のフォーム編集画面
<div class="check_wrap"> [mwform_checkbox name="check_box" class="check_box" children="チェックを入れたら入力できます。"] [mwform_text name="input_box" class="input_box" placeholder="例) 上記にチェックを入れたら入力できます。"] </div>
▼CSS(ラベルの装飾)
/* ラベルのスタイル */ label { padding-left: 30px; line-height: 30px; display: inline-block; cursor: pointer; position: relative; } /* ボックスのスタイル */ label:before { content: ''; width: 20px; height: 20px; display: inline-block; border:2px solid #EEE; position: absolute; left: 0; } label.input_checked:before { background-color:#000; }
▼JavaScript
//ラベルの動作 $(function() { var checkboxList = $(".check_wrap"); checkboxList.each(function() { var label = $(this).find("label"); // 最初の処理 $(this).find(":checked").closest("label").addClass("input_checked"); // ラベルクリック label.click(function() { label.filter(".input_checked").removeClass("input_checked"); label.find(":checked").closest("label").addClass("input_checked"); }); }); }); //入力ボックスの制御 $(function() { if ($('.check_box').prop('checked') == false) { $('.input_box').attr('disabled', 'disabled'); } $('.check_box').click(function() { if ($(this).prop('checked') == false) { $('.input_box').attr('disabled', 'disabled'); $('.input_box').val(''); } else { $('.input_box').removeAttr('disabled'); } }); });
関連記事
-
【WordPress】サイト内に検索フォームを設置する
【WordPress】サイト内に検索フォームを設置する
サイト内を検索するためのフォーム設置方法をメモメモ。 ▼検索フォームを表示 [php] <?php get_sea・・・ -
【WordPress】Smart Custom Fieldsで作成したカスタムフィールドをMW WP Formの選択項目に使用する方法
【WordPress】Smart Custom Fieldsで作成したカスタムフィールドをMW WP Formの選択項目に使用する方法
普段よくお世話になっているWordPressプラグイン、繰り返しのカスタムフィールドを作成できる「Smart Custo・・・ -
【WordPressプラグイン】「MW WP Form」でエラーメッセージをカスタマイズ
【WordPressプラグイン】「MW WP Form」でエラーメッセージをカスタマイズ
簡単にお問い合わせ等のフォームが作成できるプラグイン「MW WP Form」。 フォームの入力エラー時のメッセージをカス・・・ -
【WordPress】シングルクォーテーションやダブルクォーテーションが全角で表示される
【WordPress】シングルクォーテーションやダブルクォーテーションが全角で表示される
通常では、投稿ページで半角で入力したシングルクォーテーション「'」やダブルクォーテーション「"」は全角へ自動変換されて表・・・ -
【WordPress】優先度付きのサムネイル画像の表示方法(アイキャッチ・記事の最初の画像)
【WordPress】優先度付きのサムネイル画像の表示方法(アイキャッチ・記事の最初の画像)
WordPressで記事のサムネイル画像を表示したいとき、アイキャッチがあれば、アイキャッチを表示、なければ記事の最初の・・・ -
【WordPressプラグイン】「EWWW Image Optimizer」で使用する画像を自動で圧縮・リサイズ
【WordPressプラグイン】「EWWW Image Optimizer」で使用する画像を自動で圧縮・リサイズ
WordPressで画像を登録する際に毎回リサイズが面倒だったり、必要以上の画像サイズで登録されてしまったりとするケース・・・