jqueryでsubmitボタンのdisabled属性を切り替える仕様は、お問い合わせフォームなどで同意を求める場合などによく利用されます。
チェックボックスで切り替え
See the Pen oyRXQg by wpnote (@wpnote) on CodePen.
まずはHTMLのコードから見ていきます。
inputタグのtype属性の値にsubmitを指定しました。また、IDもそのままsubmitとしています。
切り替えボタン用のチェックボックスにはagreeというIDを付け加えています。
<p>同意する <input type="checkbox" id="agree"></p>
<input type="submit" value="送信する" id="submit">
CSSはボタンのデザインを定義しているだけなので、省略しても構いません。
#submit {
padding: 1% 3%;
background-color: #013;
color: #fff;
border-style: none;
border-radius: 10px;
cursor: pointer;
font-size:16px;
}
最後にjqueryですが、2行目の.prop(‘disabled’, true)でdisabled属性を付け加えています。また、.css(“opacity”,0.6)で透過度を変えています。
4行目#agreeをクリックした際に関数を実行します。
5行目if($(“#agree”).prop(‘checked’))でチェックボックスがクリックされているかを判別し、disable属性と透過度を切り替えています。
$(function(){
$("#submit").prop('disabled', true).css("opacity",0.6);
$('#agree').click(function(){
if($("#agree").prop('checked')) {
$("#submit").prop('disabled', false).css("opacity",1);
}
else {
$("#submit").prop('disabled', true).css("opacity",0.6);
}
})
});
コメント