JSFiddle - React, Tailwind, and code Playground

by learner73

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/silviomoreto/bootstrap-select/master/js/bootstrap-select.js"></script>
<script src="https://rawgit.com/fronteed/iCheck/1.x/icheck.js"></script>
<div class="clearfix">
    <div class="checkbox pull-left">
        <label>
            <input type="checkbox" class="checkBox" value="" />
            Options
        </label>
    </div>
    <div class="pull-left" style="margin-left: 10px;">
        <select class="selectpicker" data-size="8" disabled>
            <option selected>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
    </div>
</div>
<div class="clearfix">
    <div class="checkbox pull-left">
        <label>
            <input type="checkbox" class="checkBox" value="" />
            Limit
        </label>
    </div>
    <div class="pull-left" style="margin-left: 10px;">
        <select class="selectpicker" data-size="8" disabled>
            <option selected>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</div>

CSS

.checkbox-default, .radio-default {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(http://i.imgur.com/3Duxl8T.png) no-repeat;
    border: none;
    cursor: pointer;
}
.checkbox-default {
    background-position: 0 0;
}
.checkbox-default.hover {
    background-position: -20px 0;
}
.checkbox-default.checked {
    background-position: -40px 0;
}

JavaScript

$('.selectpicker').selectpicker();

$('input').iCheck({
	checkboxClass: 'checkbox-default',
	radioClass: 'radio-default',
});

$('.checkBox').on('ifChecked', function(event) {
    $(this).parents('.clearfix').find('.selectpicker').removeAttr('disabled');

});
$('.checkBox').on('ifUnchecked', function(event) {
    $(this).parents('.clearfix').find('.selectpicker').attr('disabled');
});