Enable and disable examples

button.html

@@ -18,6 +18,11 @@
     <h2>Single Button</h2>
 
     <a id="btn1" href="#" class="btn btn-single">Botón</a>
+    <a href="#" id="activate-btn-single">Activar</a>
+    <a href="#" id="deactivate-btn-single">Desactivar</a>
+    <a href="#" id="toggle-btn-single">Alternar</a>
+    <a href="#" id="disable-btn-single">Deshabilitar</a>
+    <a href="#" id="enable-btn-single">Habilitar</a>
 
     <h3>Radio Button Behaviour (Unique option)</h3>
 

scripts.js

@@ -2,25 +2,50 @@ $(function(){
 
 	$('.btn-single').button({
     onActivate: function () {
-      console.log('on active callback');
+      console.log('on activate callback');
     },
     onDeactivate: function () {
-      console.log('on deactive callback');
+      console.log('on deactivate callback');
     }
   });
 
+  $('#deactivate-btn-single').on('click', function(){
+    $('.btn-single').button('deactivate');
+    return false;
+  });
+
+  $('#activate-btn-single').on('click', function(){
+    $('.btn-single').button('activate');
+    return false;
+  });
+
+  $('#toggle-btn-single').on('click', function(){
+    $('.btn-single').button('toggle');
+    return false;
+  });
+
+  $('#disable-btn-single').on('click', function(){
+    $('.btn-single').button('disable');
+    return false;
+  });
+
+  $('#enable-btn-single').on('click', function(){
+    $('.btn-single').button('enable');
+    return false;
+  });
+
   $('.btn-unique').button({
     onActivate: function () {
-      console.log('on active callback');
+      console.log('on activate callback');
     },
     onDeactivate: function () {
-      console.log('on deactive callback');
+      console.log('on deactivate callback');
     }
   });
 
   $('.btn-multiple').button({
     onActivate: function () {
-      console.log('on active callback');
+      console.log('on activate callback');
     },
     onDeactivate: function () {
       console.log('on deactive callback');

style.css

@@ -1,5 +1,8 @@
-.btn{
+body{
   font-family: helvetica;
+}
+
+.btn{
   font-weight: bold;
   display: inline-block;
   padding: 10px 15px;
@@ -16,4 +19,8 @@
 .btn:active, .btn.active{
   box-shadow: inset 0 0 10px black;
   background-color: #ccc;
+}
+
+.btn.disabled{
+  opacity: 0.4;
 }