On my webpage, there are 2 buttons - one enabled by default and the other disabled. When I click on an enabled button, their states switch - the enabled button becomes disabled and vice versa. This functionality works perfectly in Chrome, Edge, and IE11, but there's an issue with Firefox (v 98.0.2).
Below is the code snippet:
<!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);">Button 1</button>
<button id="button2" onclick="$('#button2').prop('disabled',true);$('#button1').prop('disabled',false);" disabled>Button 2</button>
</body>
</html>The unexpected behavior observed in FireFox:
- Initially, everything functions as expected. The button states swap successfully. Here is the Inspector output when the page loads:
<body>
<button id="button1" onclick="$('#button1').prop('disabled',true);$('#button2').prop('disabled',false);">Button 1</button>
<button id="button2" onclick="$('#button2').prop('disabled',true);$('#button1').prop('disabled',false);" disabled="">Button 2</button>
</body>
(Apologies for not being able to upload an image)
- I click on "Button 1", it becomes disabled, and "Button 2" becomes enabled.
- Next, I refresh the page using F5 or the browser's refresh button.
- Both buttons revert to being enabled. The Inspector output when the page loads after refreshing:
<body>
<button id="button1" onclick="$('#button1').prop('disabled',true);$('#button2').prop('disabled',false);">Button 1</button>
<button id="button2" onclick="$('#button2').prop('disabled',true);$('#button1').prop('disabled',false);">Button 2</button>
</body>
It can be seen that the 'disabled' attribute of the second button is removed.
- Pressing Ctrl+F5 loads the page correctly with only one button enabled, functioning properly.
I have tried using disabled="disabled", but it does not solve the problem. Is this specific to FireFox or an error in the jQuery code? How can I fix or find a workaround for this issue?