submitボタンの disabled=true が戻ってしまいます

Question

一度しか押せないsubmitボタンを作成したのですが、ページ遷移やリロードをすると元に戻ってしまいます。
下記のコードなのですが、どのようにすれば問題が解決出来るのでしょうか。
お忙しい中恐れ入りますが、術を教えて頂けると幸いです。

<%= form.submit "確認", onclick: "disabled = true;", class: "btn btn-primary " %>

jqueryにて下記のように記載しても同じくダメでした・・・

<%= form.submit "確認",  class: "btn btn-primary " %>

<script>
$(function() {
  $('.btn').click(function() {
    $(":submit", this).prop("disabled", true);
  });
});
</script>

宜しくお願い致します。

追記：

・submitボタンがあるページは子モデルのindexです。

・確認ボタンは子モデルのインスタンス毎に持っています

・ボタンを押すと中間テーブルにcurrent_user.idとボタンを押した子モデルのidがレコードに追加されます。

・current_userに紐づく子モデルの数をcountし、current_userのshowページにて「◯件確認済み」と表記します

上記の内容から、ページ遷移やリロードによって、deleteが戻ってしまうと、同じ子モデルのインスタンスが何度もcountできてしまうため、一度きりのボタンを作成したいです。
しかし、新たな子モデルのインスタンスが追加された場合は、indexに追加されるので、ページには何度も遷移できる必要があります。

Comments

[maisumakun]

「どのような条件」に対して1度しか押せないようにしたいのでしょうか。

（現状のコードでは、「1回のページ表示」に対してボタンが1度だけ押せる、という実装となっています）

[azumaken]

早急のお返事ありがとうございます。「1回のページ表示」になっているのですね。
submitボタンですので、1度対象データを送信したら、ページ表示関係なく２度と送信できなくしたいです。

[maisumakun]

> ページ表示関係なく２度と送信できなくしたいです。

Answer 1

submitボタンですので、1度対象データを送信したら、ページ表示関係なく２度と送信できなくしたいです。

それはボタンで制御するのではなく、再表示やブラウザバックの方をできなくすることで制御すべきものではないかと考えます。

Comments

[azumaken]

ありがとうございます。ブラウザバックを行った場合、submitボタンを押した後に他のページに遷移し、再度ボタンのあるページに遷移することは出来るのでしょうか。

[maisumakun]

どういう背景（させたい/させたくないなど）での疑問ですか？

[azumaken]

わかりにくい内容で、大変申し訳ありません。
うまく説明ができなくて恐縮ですが、本文に追記させていただきました。

[maisumakun]

でしたら逆に、ボタンを押した時にページ遷移させるのではなく、JavaScriptを使って「Ajaxでレコードを作る＆ボタンを無効化する」というような対応法も考えられます。

[azumaken]

ご提示ありがとうございます。
数時間考察したのですが、下記のコードしかわからず解決できません。
何度も申し訳ないのですが、ヒントなどをいただけないでしょうか

<%= form_with(model: Intermediate, url: user_intermediates_path(current_user), remote: true) do |form| %>
<%= hidden_field_tag :user_id, current_user.id %>
<%= hidden_field_tag :care_user_id, care_user.id%>
<%= form.submit "確認", class: "btn btn-primary " %>

$(() => {
$(".btn").on("submit", (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const url = $(e.target).attr("action");

$.ajax({
url: url,
type: "GET",
data: formData,
dataType: "json",
processData: false,
contentType: false
}).done((data) => {

});
});
});