Как активировать и деактивировать кнопку с помощью js ?

Question

[Chvalov]

Здравствуйте, есть код:

<button class="btn btn-default btn-primary" onclick="GetMap()">Загрузить карту</button> 
<button class="btn btn-default disabled" onclick="ZoomOut();"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default disabled" onclick="ZoomIn();"><span class="glyphicon glyphicon-zoom-in"></span></button>

Как сделать чтобы последние две кнопки били отключены по умолчанию и при нажатии на первую кнопку (Загрузить карту) делались активными и меняли свой класс на активный (bootstrap 3)

btn btn-default btn-primary <b><del>disabled</del></b>

И после того как две кнопки стали активные делать первую не активной, так как больше ее не потребуется

Answer 1

[Юрий Лобанов]

Вот пример codepen.io/iiil/pen/rJtdk

html

<button class="btn">1</button>
<button class="btn disabled" disabled>2</button>
<button class="btn disabled" disabled>3</button>

js

var buttons = $(".btn");
buttons.eq(0).click(function() {
   buttons.filter(".disabled").removeClass("disabled").attr('disabled',false);
   $(this).addClass("disabled").attr('disabled',true);  
});

Код @LuckyTrue только сделает кнопки выглядящими неактивными.

Comments

[Андрей Морозов]

Действительно забыл про атрибут. Исправил свой ответ.

Answer 2

[Андрей Морозов]

var buttons = $(".btn");

buttons.eq(0).click(function() {
    $(this).addClass("disabled").attr("disabled", true);
    
    buttons.filter(".disabled").removeClass("disabled").attr("disabled", false);
});