disable属性によるフォームボタンのオンオフ制御ができない

Question

前提

laravel8にて勤怠管理アプリ作成中です。
フォームのボタンにjavaScriptを用いてbladeファイル読み込み時
に条件分岐にてdisable属性を使用してオンオフ制御をしたいのですが、うまく機能しません。

実現したいこと

勤怠ページに勤務開始、休憩開始、休憩終了、勤務終了４つのボタン
があります。
勤怠ページ読み込み→jsにて勤務開始のみクリック可能に
↓
勤務開始クリック→コントローラにてDBに現在時刻を打刻→適当な変数に値を入れる→
変数を持って最初のページにリダイレクト
↓
勤怠ページ読み込み、変数に値が入っていれば勤務終了と休憩開始のみクリック可能に

といった具合にdisable制御を機能させようとしています。

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

勤務開始のみ実装して動作確認をしてる段階ですが、うまく機能せず
原因が特定できていない状況です。
jsのコードは継承のbladeに直書きです。
そもそもjavascriptが正しく機能していないのでしょうか。

該当のソースコード

document.addEventListener('DOMContentLoaded',function() {
          
          var start = @json($start);
          var end = @json($end);
          var rest_start = @json($rest_start);
          var rest_end = @json($rest_end);

          const startButton = document.getElementById('startButton');
          const endButton = document.getElementById('endButton');
          const restInButton = document.getElementById('restInButton');
          const restOutButton = document.getElementById('restOutButton');

         endButton.disabled = true;
         restInButton.disabled = true;
         restOutButton.disabled = true;

          if(!empty($start)){
            startButton.disabled = true;
            endButton.disabled = false;
            restInButton.disabled = false;
          }
          },false);

```blade.php(フォームボタン部分）
<div class="button-box">
        <div class="top-button">
        <form action="/work_start" method="POST" class="button-form" name="start">
          @csrf
        <button type="submit"  id="startButton" >勤務開始</button>
        </form>
        <form action="/work_end" method="POST" name="end">
          @csrf
        <button type="submit" id="endButton" >勤務終了</button>
        </form>
        </div>
        <div class="bottom-button">
        <form action="/rest_start" method="POST" name="rest-start">
          @csrf
          <button type="submit"  id="restInButton" >休憩開始</button>
        </form>
        <form action="/rest_end" method="POST" name="rest-end">
          @csrf
          <button type="submit"  id="restOutButton" >休憩終了</button>
        </form>
        </div>
      </div>

### 試したこと


### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

JSの中でPHPを書いても動かない。if(!empty($start)){

JSとPHPの区別を付ける基本を理解できてないならJSを使うのはやめた方がいい。
JSでdisabledにしたところでhtmlのフォームはそんなことを無視して送信できるので送信させない対策としては不十分。

DBを使ってるならコントローラーからviewに渡すのはそのDBのデータ。
DBのデータを見て表示を切り替える。
DBがどうなってるかもボタンを表示する細かい条件も質問者しか知らないので質問者が考えること。

@if(blank($work->work_start))
    <form action="/work_start" method="POST" class="button-form" name="start">
        @csrf
        <button type="submit" id="startButton" >勤務開始</button>
    </form>
@else
勤務中
@endif

@if(filled($work->work_start))
     <form action="/work_end" method="POST" name="end">
          @csrf
        <button type="submit" id="endButton" >勤務終了</button>
     </form>
@endif

DBのデータでは切り替えられないならDBの設計を間違えてる。

さらにすでに勤務開始してるのに強引に/work_startに送信された場合はコントローラーでエラーを出す。JSでのdisabledは対策にならないのでコントローラーに来た段階でも検証。

abort_if(filled($work->work_start), 500);