jQueryでチェックボックスを押した時にdisabled属性を切り替える

jqueryjavascript

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

コメント