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');
        }
    });
});