チェックboxにチェックでボタンリンクの表示（デフォルトでのチェックを外したい）

Question

前提・実現したいこと

チェックboxにチェックでボタンリンクの表示したい

発生している問題・エラーメッセージ

デフォルトでチャックが入ってしまう。チェックされていない状態にしたい。

該当のソースコード

// JavaScript Document
jQuery(function() {
jQuery('#submit').attr('disabled', 'disabled');
jQuery('a#submit-link').click(function(){
return false;
});
jQuery('a#submit-link').css('pointer-events', 'none');

jQuery('#check').click(function() {
if ( jQuery(this).prop('checked') == false ) {
jQuery('#submit').attr('disabled', 'disabled');
jQuery('a#submit-link').click(function(){
return false;
});
jQuery('a#submit-link').css('pointer-events', 'none');
} else {
jQuery('#submit').removeAttr('disabled');
jQuery('a#submit-link').off('click');
jQuery('a#submit-link').css('pointer-events', '');
}
}).trigger('click');
});

他の方が作成されたコードを修正しているのですが上手くできません。
お力をお貸しください。
よろしくお願いします。

Answer 1

  // }).trigger('click'); // delete.
  });

Comments

[x_x]

// re
っていうのは無視してください。
teratailでは時々編集途中のものが反映されてしまうようです。

[madoka9393]

})の部分は残しておかないとダメじゃないですかね？

[madoka9393]

「.trigger('click')」が付与されていることでデフォルトでチェックが入ってしまっている(該当部分を削除したらデフォルトのチェックが外れたので)ことがわかりました。
質問者ではないのですが、後学のため、よろしければ原因や理由を教えていただきたく…。

[mikohayu]

ありがとうございました！

[x_x]

To madoka9393 さん。
書いてありますよね？ 次行に

というか、これで解決しなかったのですね

[madoka9393]

＞書いてありますよね？ 次行に
最下段の2行分
}).trigger('click');
});
を
//}).trigger('click');
});
に変更したものだと勘違いしていました。

以下1行分
}).trigger('click');
を
//}).trigger('click');
});
に書き換えたものだったのですね。失礼いたしました。

Answer 2

チェックボックスのチェック状態について、JavaScriptでも制御はできますが、
デフォルトのチェックの有無はHTML側で指定できます。(以下リンク参照)
<input type="checkbox"> …… チェックボックスを作成する

質問文にはHTMLの内容が記載されていないのでなんともですが、
JavaScriptを見る限りJavaScript側で付与したりはしてなさそうに見えるので、
HTML側で該当するチェックボックスにcheckedが付与されていないか確認してみてはどうでしょう。

追記　打消し線の部分について
x_x 様の回答を確認してわかったのですが、.trigger('click');の部分が作用して、
デフォルトのチェックが入ってしまっているのですね…。勉強不足でした。

Comments

[mikohayu]

madoka9393さん
ご連絡ありがとうございます。
html側には入っていないのですが...
下記がhtml側のソースになります。

<label><input type="checkbox" id="check">&nbsp;同意する</label></p>
<p class="btns"><a id="submit-link" href="/contact/form/" style="text-decoration:none;"><input type="submit" value="お問い合わせ内容の入力に進む" id="submit" class="c-btn01" /></a></p>

[madoka9393]

なるほど確かに…。
であれば、html側で制御するなら「checked=""」を付与してあげればデフォルトでのチェックを外すことができますね。

[mikohayu]

ありがとうございました！
解決できました！

Answer 3

アンカーはマウスカーソルためだけの処理ですか？
cssのcursorで良いのでは？

$(function(){
  $('#submit').prop('disabled',true);
  $('#check').on('click',function() {
    var flg=$(this).prop('checked');
    $('#submit').prop('disabled',!flg).css('cursor',flg?'pointer':'');
  });
});

<p><label><input type="checkbox" id="check">&nbsp;同意する</label></p>
<p class="btns"><input type="submit" value="お問い合わせ内容の入力に進む" id="submit" class="c-btn01" /></p>

Comments

[mikohayu]

なるほど！
確かにそうですね！！
ありがとうございます！