The button's "disabled" attribute doesn't work in FireFox after the refresh (F5)-CodePudding

I have 2 buttons on the page. The first is enabled by default, the second is disabled. If I press an enabled one, the state swaps. An enabled button become disabled and vice versa. Everything works fine in all browsers (Crhome, Edge, IE11) except FireFox (v 98.0.2)

Here is the code:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  </head>
  <body>
      <button id="button1" onclick="$('#button1').prop('disabled',true);$('#button2').prop('disabled',false);">Buttton 1</button>
      <button id="button2"  onclick="$('#button2').prop('disabled',true);$('#button1').prop('disabled',false);" disabled>Buttton 2</button>
  </body>
</html>

The FireFox unexpected behaviour:

I open a page. It works fine. It switches buttons. Here is an Inspector output on a page load:

    <body>
          <button id="button1" onclick="$('#button1').prop('disabled',true);$('#button2').prop('disabled',false);">Buttton 1</button>
          <button id="button2" onclick="$('#button2').prop('disabled',true);$('#button1').prop('disabled',false);" disabled="">Buttton 2</button>
      
    
    </body>

(Sorry, can't upload an image)

I press "Button 1", it becomes disabled. "Button 2" becomes enabled.
I press F5 or the refresh button from the browser panel.
Both buttons become enabled. An Inspector output on a page load:

<body>
      <button id="button1" onclick="$('#button1').prop('disabled',true);$('#button2').prop('disabled',false);">Buttton 1</button>
      <button id="button2" onclick="$('#button2').prop('disabled',true);$('#button1').prop('disabled',false);">Buttton 2</button>
  

</body>

As you can see, it loses a disabled attribute of the second button.

I press Ctrl F5. It loads proper page with only one button enabled. Everything works fine.

I tried disabled="disabled". It doesn't help. Is it FireFox specific of jQuery code error? How can I correct or work around it?

CodePudding user response：

Firefox try to restore user entered state, what is wrong in case of disabled buttons. There's a 10 years old issue for this behavior which is still open.

https://bugzilla.mozilla.org/show_bug.cgi?id=654072

CodePudding user response：

The reason

As it's explained in lotterfreiands answer, it's a FireFox restore page state feature.

The workaround

I used an initialisation in $(document).ready() function. It helps me with FireFox. It is called at every F5-refresh after restoring, as far as I can see. The code:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type = "text/javascript">
        $(document).ready(function() {
            $('#button2').prop('disabled',true);
            $('#button1').prop('disabled',false);
        });
     </script>
  </head>
  <body>
      <button id="button1" onclick="$('#button1').prop('disabled',true);$('#button2').prop('disabled',false);">Buttton 1</button>
      <button id="button2"  onclick="$('#button2').prop('disabled',true);$('#button1').prop('disabled',false);" disabled>Buttton 2</button>
  </body>
</html>