jqueryで<input>タグにreadonlyを付与する方法について

○ 実現したい事
index.html内のフォームに入力後、確認ボタンをクリックした時にページ遷移をさせずに、<input>タグにreadonlyを付与し、index.htmlの中で確認画面のような形で表示したいです。

○現状
現状のhtmlとjqueryは下記になります。確認ボタンを押すと、index.htmlがリロードされ、フォームに入力した
内容が消え、<input>タグにもreadOnlyが付与されておりません。

○ index.html

<form name="signup" method="post" id="contact-form">
<dl class="form-item-wrap">
<dt class="label"><label for="form-name">お名前</label></dt>
<dd class="name-input form-info-con">
<input type="text" name="お名前" class="validate[required]" id="form-name">
</dd>
</dl>
</form>

<div class="btn-area">
<ul class="form-btnList">
<li class="btn-navy-submit">
<input type="submit" id="input-button-send" value="確認する" class="btn-navy-submit-inner">
</li>
</ul>
</div>

○ jquery

$(function () {
    $('#input-button-send').on('click', function () {

        $('input').prop('readOnly', true);
    })

});

退会済みユーザー

2018/12/30 04:28

うまく行ってないの定義は？

退会済みユーザー

2018/12/30 04:29

説明に不足があり失礼いたしました。訂正いたします!

行動規範の内容に同意します

回答1件

ベストアンサー

確認だけのボタンの手っ取り早い方法は

diff
1- <input type="submit" id="input-button-send" value="確認する" class="btn-navy-submit-inner">
2+ <input type="button" id="input-button-send" value="確認する" class="btn-navy-submit-inner">

とする。

また jquery のイベント実行の最後で return false 等をしてイベントを中止してやればいいかと。

diff
1$(function () {
2    $('#input-button-send').on('click', function () {
3
4        $('input').prop('readOnly', true);
5+       return false;
6    })