JSFiddle - React, Tailwind, and code Playground

by Edward

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="container">
    <div class="test">
      <button id="button" type="button" data-loading="Loading..." data-disabled-states="invalid" data-invalid-text="Invalid">
        Testing button
      </button>
    </div>
    
    <div>
      <div class="btn-group" role="group" aria-label="...">
        <button id="reset" type="button" class="btn btn-default">Reset</button>
        <button id="loading" type="button" class="btn btn-default">Loading</button>
        <button id="invalid" type="button" class="btn btn-default">Invalid</button>
      </div>
    </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

div.test {
  margin: 10px;
}

JavaScript

$.fn.button.Constructor.prototype.setState = function (state) {
  var d    = 'disabled';
  var $el  = this.$element;
  var val  = $el.is('input') ? 'val' : 'html';
  var data = $el.data();

  var shouldDisable = state == 'loading';
	if (data.disabledStates) {
    var disabledStates = data.disabledStates.split(',');
    if (disabledStates.indexOf(state) != -1) {
      shouldDisable = true;
    }
  }

  state += 'Text';

  if (data.resetText == null) $el.data('resetText', $el[val]());

  // push to event loop to allow forms to submit
  setTimeout($.proxy(function () {
    $el[val](data[state] == null ? this.options[state] : data[state]);

    if (shouldDisable) {
      this.isLoading = true;
      $el.addClass(d).attr(d, d).prop(d, true);
    } else if (this.isLoading) {
      this.isLoading = false;
      $el.removeClass(d).removeAttr(d).prop(d, false);
    }
  }, this), 0)
};


$('#reset').click(function() {
	$('#button').button('reset');
});

$('#loading').click(function() {
	$('#button').button('loading');
});

$('#invalid').click(function() {
	$('#button').button('invalid');
});