How I can remove all the events on a HTML element?

Question

I am building a button in the backend as follow:

<?php
echo $this->myFormButton(
    'add_component_restriction',
    'Add',
    [
        'class'       => 'btn btn-default add_component_restriction',
        'type'        => 'button'
    ]
);
?>

This will generate the following HTML:

<button name="add_component_restriction" 
        id="add_component_restriction" 
        type="button" 
        value="Add" class="btn btn-default add_component_restriction" 
>Add</button>

The element could be rendered as view only meaning you can view it but you can't act on it and if so I should be able to remove all the actions on it.

I did know this can be done only on the DOM level using Javascript (maybe I am wrong) maybe using .off() or setting something like this onclick="javascript: return false;" on the element.

I don't know if make it disabled or readonly will do the job.

Is Javascript/jQuery the only way ? If there is another solution please let me know

Answer 1

Add the disabled attribute.

<?php
echo $this->myFormButton(
    'add_component_restriction',
    'Add',
    [
        'class'       => 'btn btn-default add_component_restriction',
        'type'        => 'button',
        'disabled'    => 'disabled'
    ]
);
?>