Conditional-buttons

JQuery Based Conditional Buttons

Download this project as a .zip file Download this project as a tar.gz file

Setup

Load required file(s)

The only required file is jquery.conditionalbuttons.min.js.

Additionally, you can optionally add contextual-eval.min.js to simply the expressions.

//-- with contextual-eval --//
$('#btn-zoom').conditionalbuttons('checkedBoxes[0] == true');
//-- without contextual-eval --//
$('#btn-zoom').conditionalbuttons('c.checkedBoxes[0] == true');

Usages

You have ways to register buttons.

Generally you will do this:

$('#btn-zoom').conditionalbuttons('checkedBoxes[0] == true');

Optional you may pass an object to enable additional features:

//-- these settings are optional --//
$('#btn-zoom').conditionalbuttons({
  // expression
  condition: 'checkedBoxes[0] == true',
  // custom callback when button stage become enabled
  activeCallback: function(button) {
    button.css('color', 'red');
  },
  // custom callback when button stage become disabled
  disableCallback: function(button) {
    button.css('color', 'silver');
  }
});

Internally button registration is done in the statically way:

$.conditionalbuttons(
  // button jQuery selector
  '#btn-zoom',
  // expression
  'checkedBoxes[0] == true',
  // optional custom callback when button stage become enabled
  activeCallback: function(button) {
    button.css('color', 'red');
  },
  // optional custom callback when button stage become disabled
  disableCallback: function(button) {
    button.css('color', 'silver');
  }
);

Demo

Register Expressions

The following expressions have registered (contextual-eval used):

Note: multiple expressions added to the same button will joined by OR operator.

//-- additional feature is registered using object --//
$('#btn-zoom').conditionalbuttons({
  condition: 'checkedBoxes[0] == true',
  activeCallback: function(button) {
    button.css('color', '#ef4836');
  },
  disableCallback: function(button) {
    button.css('color', '#95a5a6');
  }
});
//-- mulitple expressions added onto a button will joined using OR operator --//
$('#btn-zoom').conditionalbuttons('checkedBoxes[4] == true');
$('#btn-remove, #btn-star').conditionalbuttons('checkedBoxes[0] == true && checkedBoxes[1] == true');
$('#btn-map, #btn-cloud, #btn-plus').conditionalbuttons('checkedBoxes[0] == false && checkedBoxes[2] == true && checkedBoxes[3] == true');
$('.btn-group button').conditionalbuttons('checkedBoxes[5] == true');

Change button stages by calling trigger:

//-- normalize your conditions is more preferable --//
var controls = $('.control input');
controls.click(function() {
  var ctx = [];
  for(var i = 0; i < controls.length; i++) {
    ctx[i] = controls[i].checked ? true : false;
  }
  $.conditionalbuttons.trigger({checkedBoxes: ctx});
});

Console

or =

+ = + +

+ - = + +