Code snippet for checkbox styling
<script>
$(function () {
//Initialize Select2 Elements
$(".select2").select2();
//Applying flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
checkboxClass: 'icheckbox_flat-red',
radioClass: 'iradio_flat-red'
});
});
Jquery script for toggling second checkbox
<script>
$("#ch_bx_haveparent").iCheck('toggle', function () {
$("#ch_bx_haveparent").on('ifChecked', function (event) {
alert('ch_bx_status Checkbox Shown');
$("#ch_bx_status").show();
});
$("#ch_bx_haveparent").on('ifUnchecked', function (event) {
alert('ch_bx_status Checkbox hidden');
$("#ch_bx_status").hide();
});
});
Link to Icheck Checkbox on GitHub
Embedded HTML snippet
<div class="modal" id="menuiconmodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Menu</h4>
</div>
<div class="modal-body">
<div class="form-group"><input type="checkbox" class="flat-red" id="ch_bx_haveparent"/>
// Input tag for checkbox to be shown and hidden
<div class="form-group"><input type="checkbox" class="flat-red" runat="server" id="ch_bx_status" /></div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:;" id="sucess" class="btn btn-primary" data-dismiss="modal">Save</a>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Alerts are displaying but the hide/show functionality is not working as expected.