Question

I’ve got the following problem: I’ve made an options dialog with, for each row, some text, and a button, which changes state between ON and OFF via a get request to the server.

Whenever i hover on the button, it gets highlighted with its “hover” state, and when i click it, it gets “clicked” state, and then i release the mouse and it gets normal again. That’s exactly what I expect, because it’s the normal behavior.

But what I want to do, and this is driving me crazy because I can’t find it anywhere, is that the buttons won’t respond to my mouse hovering, and clicking, and that I can activate or deactivate the “clicked” state with the server response. How would I accomplish this?

I have the following code to initialize the dialog and button:

<script>
    $(document).ready(function() {
        $("#dlg1").dialog();
        $(".settings_buttons").button();
    });
</script>

And the HTML setup of the dialog and button:

    <div id="dlg1" title="Global device settings" class="dialog_window">

        <table>
            <form>
                <tr>
                    <td><h2>Setting</h2></td>
                    <td><button id="btn2" class="settings_buttons">OFF</button></td>
                </tr>
            </form>
        </table>

    </div>

Answer 1

Have You try to disable a button? It’s the fastest but mayby not the best solution just put:

<td><button id="btn2" class="settings_buttons" disabled="disabled">OFF</button></td>

You should use disabled=”disabled” for crose browsers result.