Как включить / отключить кнопку HTML на основе сценариев?

Question

На моей веб-странице есть кнопка с кодом ниже -

HTML:

<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button"></button>

CSS:

.checkout-button{
width: 130px;
height: 35px;
background: url('../poc2/images/checkout.png') no-repeat;
border: none;
vertical-align: top;
margin-left:35px;
cursor:pointer;
}

Теперь кнопка работает нормально, так как я могу нажать на нее и запустить соответствующий код php; указатель превращается в символ руки, позволяющий пользователю четко знать, что на него можно нажимать, а на кнопку - кнопку.

Я хотел бы изменить поведение этой кнопки в зависимости от некоторых условий. Пример псевдокода:

if flag=1: 
    /* enable the button, and let the user click it and run the php code */
else: 
    /* display this button, but don't let any actions take place if the user clicks on it; */

Как мне кодировать эту логику включения-отключения для кнопки? По сути, я хочу, чтобы кнопка работала как кнопка в обычных ситуациях; и просто как изображение без какой-либо гиперссылки в некоторых других ситуациях.

Answer 1

Вы можете сделать это без JavaScript (требуется обновление страницы) или с JavaScript и без обновления.

Просто используйте атрибут disabled:

<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button" disabled="disabled"></button>

И создайте стиль CSSдля него, как в примере ниже:

http://jsfiddle.net/Rgsen/14/

Answer 2

Если позволяет ваше обстоятельство, вы можете просто удалить содержимое атрибута action из тега form. Поэтому, когда пользователь нажимает кнопку «Отправить», никаких действий не предпринимается.

Answer 3

Вы можете сделать это либо путем изменения атрибута, либо путем добавления / удаления класса.

Изменение атрибута

Вы можете переключаться между <button disabled="true"> и <button disabled="false">

С javascript это может выглядеть так:

if flag=1: 
    document.getElementById("your-btn").disabled = true;
else: 
    document.getElementById("your-btn").disabled = false;

И с jquery, вот так:

if flag=1: 
    $('#your-btn').prop('disabled', true);
else: 
    $('#your-btn').prop('disabled', false);

Добавление / удаление класса

Добавьте следующееcss:

.btn-disabled{
    cursor: not-allowed;
    pointer-events: none;
}

И добавьте / удалите класс для кнопки.

С помощью jquery:

if flag=1: 
    $('#your-btn').addClass('btn-disabled');
else: 
    $('#your-btn').removeClass('btn-disabled');

Если вы не хотите jquery, но чистый javascript, здесь как это сделать.