テキスト入力したら「入力完了ボタン」の色を変える方法

下記サンプルをダウンロードしてご確認ください。
フォームサンプルページ＞
フォームサンプルダウンロード＞

 ※ソースコード確認方法
サンプルページをChromeブラウザで開いて下記操作を行ってください。 
windows：Ctrl + U 
mac：option + command + U


【index.html】
入力完了時にenableValのClassを追加することでボタンの色を変更しています。

①styleの設定（30～68行目）

<style>
	textarea {
		padding: 10px;
		vertical-align: top;
		width: 100%;
		font-size: 16px!important;
		line-height: 1.6;
	}
	textarea:focus {
		outline: 2px solid #daecff;
	}
	button.next-btn {
		border: none;
		color: #999;
		border: 1px solid #d8d8d8;
		background: #F8F8F8;
		background: -moz-linear-gradient(top,  #FFF 0%, #F8F8F8 100%);
		background: -webkit-linear-gradient(top,  #FFF 0%,#F8F8F8 100%);
		background: linear-gradient(to bottom,  #FFF 0%,#F8F8F8 100%);

		opacity: 0.3;
		pointer-events: none;
		transition: all 0.2s 0s ease;
	}
	button.next-btn.enable {
		opacity: 1;
		pointer-events: auto;
	}
	button.next-btn.enableVal {
		opacity: 1;
		pointer-events: auto;
		color: #fff;
		border: 1px solid #d8d8d8;
		background: #ff8e00;
		background: -moz-linear-gradient(top,  #ffc57e 0%, #ff8e00 100%);
		background: -webkit-linear-gradient(top,  #ffc57e 0%,#ff8e00 100%);
		background: linear-gradient(to bottom,  #ffc57e 0%,#ff8e00 100%);
	}
</style>

②テキストエリア表示部分（102～134行目）

<section class="q q1">
	<input type="hidden" name="col_1_title" value="テキスト入力制限あり">
	<h2>質問1<span>*</span></h2>
	<div class="txt">
		<h3>テキスト入力制限あり</h3>
	</div>
	<textarea name="col_1" placeholder="テキスト入力" class="validate[required]" data-prompt-position="topLeft"></textarea>
	<div style="width: 100%;">
		<ul class="btn" style="margin: 1em auto; width: 50%;">
			<li>
				<button type="button" class="next-btn q1-btn">入力完了</button>
			</li>
		</ul>
	</div>
</section>

<section class="q q4">
	<input type="hidden" name="col_4_title" value="テキスト入力制限なし">
	<h2>質問4</h2>
	<div class="txt">
		<h3>テキスト入力制限なし</h3>
		<p style="margin: .8rem 0 0; font-size: .8rem; color: #777;">(未記入の場合はそのまま入力完了を押してください)</p>
	</div>

	<textarea name="col_4" placeholder="テキスト入力" class="" data-prompt-position="topLeft"></textarea>
	<div style="width: 100%;">
		<ul class="btn" style="margin: 1em auto; width: 50%;">
			<li>
				<button type="button" class="next-btn q4-btn enable">入力完了</button>
			</li>
		</ul>
	</div>
</section>

③JavaScript挙動部分（171～224行目）

	//次の設問へスクロール
	function scrollNext(anchor) {
		var position = $(anchor).offset().top;
		$("html, body").animate({
			scrollTop: position
		}, 500, "swing");
		return false;
	}

	$(function() {
		$('.q1').on('change', function() {
			var val = $('.q1 textarea').val();
			if (val == "") {
				$(".q1-btn").removeClass("enableVal");
			}
			else{
				$(".q1-btn").addClass("enableVal");
			}
		});
	});
	$(function() {
		$('.q1-btn').on('click', function() {
			$('.q4').show();
			if($('.btn.entry').css('display') == 'none') {
				scrollNext('#scrollAnchor');
			}
		});
	});

	$(function() {
		$('.q4').on('change', function() {
			var val = $('.q4 textarea').val();
			if (val == "") {
				$(".q4-btn").removeClass("enableVal");
				if($('.btn.entry').css('display') == 'block'){
					$(".q4-btn").addClass("enableVal");
				}
			}
			else{
				$(".q4-btn").addClass("enableVal");
			}
		});
	});
	$(function() {
		$('.q4-btn').on('click', function() {
			if($('.btn.entry').css('display') == 'none') {
				$('.btn.entry').show();
			}
			if($('.btn.entry').css('display') == 'block'){
				$(".q4-btn").addClass("enableVal");
			}
			scrollNext('#scrollAnchor');
		});
	});