How can I prevent a user using inspect element to enable a disabled element?

Question

I have a button as follows:

<input type="submit" class="button" value="FooBar" name="FooBar" id="FooBar" disabled="disabled">

I am enabling this button only when certain parameters are met. To test whether it was secure, I pressed F12 (or right click -> Inspect Element) and edited out the text disabled="disabled". Doing this overrides my code and that is scary. How can I prevent someone from changing it in this manner?

I am using php and jquery in this page and using the latter to enable or disable the button. I have checked the jquery click function and it not only executes, but shows the button as not disabled. The alert below reads Disabled: false

$("#FooBar").click(function(){
    alert('Disabled: ' + $(this).is('[disabled=disabled]'));    
})

So how can I prevent a user from changing the button disabled state and thus overriding my logic?

Answer 1

You can disable the right-click by doing:

document.addEventListener('contextmenu', event => event.preventDefault());

but it is not recommended. Why? It achieves nothing other than the annoying user

OR

Alternatively, a better approach is to recheck your validations in submit action and simply returns if it fails, in this case, if user inspects and changed the state of a button, the button stays idle and will not allow to proceed

$("#FooBar").click(function() {
    if (!this.acceptenceCriteria()) {
        return;
    }
    alert('Disabled: ' + $(this).is('[disabled=disabled]'));    
})