Rectangle 27 0

Lets say you have checkboxes in this format:

<input type="checkbox" class="my_checkbox" data-label="Check me" />

Than you can change your icon and text this way:

var checkboxClass = 'checkbox_cls';
$('.my_checkbox').each(function(i) {
    var thisCheckbox=$(this);
    thisCheckbox.iCheck({
        checkboxClass: checkboxClass,
        insert: '<div class="icheck_line-icon"></div><span class="insert_label">' + thisCheckbox.data("label") + '</span>'
    });
    var thisIcon = thisCheckbox.siblings('.icheck_line-icon');
    var thisLabel = thisCheckbox.siblings('.insert_label');
    thisCheckbox.on('ifChecked', function(e){
        thisIcon.addClass('icon-checked');
        thisLabel.html('Im checked');
    });
    thisCheckbox.on('ifUnchecked', function(e){
        thisIcon.removeClass('icon-checked');
        thisLabel.html('Not checked');
    });
});

jquery change attribute of icheck plugin - Stack Overflow

jquery icheck
Rectangle 27 0

You can use ul li list to get it working, wrap your input and label with li and style it with display: inline-block;

<p>Are you sure you want to have your details removed from our marketing list?</p>
<ul>
    <li>
        <input type="radio" name="iCheck">
        <label>Yes</label>
    </li>
    <li>
        <input type="radio" name="iCheck">
        <label>No</label>
    </li>
ul {
    list-style:none;
}
ul li {
    display: inline-block;
    margin-left: 15px;
}

jquery - iCheck library: CSS styling issue - Stack Overflow

jquery css icheck
Rectangle 27 0

It looks like the iCheck update method isn't seeing the change to the disabled attribute. You could try the native iCheck method for disabling a checkbox:

if (checkboxes.filter(":checked").length >= limit) { 
    checkboxes.not(":checked").iCheck('disable'); 
} else {
    checkboxes.not(":checked").iCheck('enable'); 
}
$("#modal1").on("change", function() {      var limit = 3;     checkboxes = $(this).find("input:checkbox");     if (checkboxes.filter(":checked").length >= limit) {         checkboxes.not(":checked").iCheck('disable');      }     else {          checkboxes.not(":checked").iCheck('enable');      }  });

Thanks! That put me on the right track!

jquery - Limit number of checked checkboxes using iCheck - Stack Overf...

jquery checkbox icheck
Rectangle 27 0

I have rewritten the icheck directive you were using to correctly interact with the model. Here is a working plunk that I hope you can use: http://plnkr.co/edit/toxxrRTfmltyamtI7ZG6?p=preview

jquery - icheck checkboxes not working with angularjs - Stack Overflow

jquery angularjs angularjs-directive icheck
Rectangle 27 0

$j('input:checkbox.tip-facturare').on('ifChecked', function(e){
    $j('input:checkbox.tip-facturare').not($j(this)).iCheck('uncheck').iCheck('enable');
    $j(this).iCheck('disable').parents('div').removeClass('disabled');
});

$j(document).on('mouseleave','.hover.checked', function() {
    $j(this).removeClass('hover');
});

Disabling the checkbox cleanly prevents user from unchecking, but makes it gray (per iCheck's '.checked.disabled' class). Doing .removeClass('disabled') on the parent div restores the color without having to hack the background position (iCheck uses one background image for all checkbox and radio states) and having to undo it later. Another side-effect is the 'hover' class won't go away when you mouseout, presumably because it's now disabled, hence the extra mouseleave listener.

Tested in the latest versions of Chrome, Firefox, and IE. Well, I tested using '$', but I'm not using multiple JS libraries. Converted to $j for you.

javascript - iCheck checkboxes as radio buttons - Stack Overflow

javascript jquery html css icheck
Rectangle 27 0

$('#container').find('input').iCheck();

have you tried checking length of $('#container input')? I am not sure but input is not the direct child of container so might not be found with selector $('#container input').

$('#container input') selects each <input/> inside #container, no matter if it is a direct child. Direct children would be selected the same like in css with $('#container > input').

javascript - Apply iCheck (jQuery plugin) to dynamically created Check...

javascript jquery jquery-plugins icheck
Rectangle 27 0

Choose a skin and import the css for selected one:

<link href="http://fronteed.com/iCheck/skins/all.css" rel="stylesheet"> 
<script src="http://fronteed.com/iCheck/icheck.js"></script>

and to load the iCheck you can use, for example:

$(".ex-f").iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal'
});

jquery - iCheck checkboxes not displaying - Stack Overflow

jquery ruby-on-rails checkbox asset-pipeline icheck
Rectangle 27 0

I up adding .on("ifToggled" plus SpaceDog's code, which solved the problem.

$("#modal1").on("ifToggled", function() {
    checkboxes = $(this).find("input:checkbox");  
    if (checkboxes.filter(":checked").length >= 3) { 
        checkboxes.not(":checked").iCheck('disable'); 
    } else { 
        checkboxes.not(":checked").iCheck('enable');
    } 
});

jquery - Limit number of checked checkboxes using iCheck - Stack Overf...

jquery checkbox icheck
Rectangle 27 0

// Remove the checked state from "All" if any checkbox is unchecked
$('.check').on('ifUnchecked', function (event) {
    $('#check-all').iCheck('uncheck');
});

// Make "All" checked if all checkboxes are checked
$('.check').on('ifChecked', function (event) {
    if ($('.check').filter(':checked').length == $('.check').length) {
        $('#check-all').iCheck('check');
    }
});

handling $('#check-all').on('ifUnchecked', ... is tricky though - it fires the other handling and every checkbox gets unchecked

ugly solution with static variable jsfiddle.net/zbc0v7cc

@user1896653 and fixed the handlers a bit

There is a problem. See the screenshot please. I hope, you'll understand it. i.imgur.com/ZlUHcuT.jpg

@user1896653 thanks for thorough testing. yeah, that code is very leaky. can be fixed jsfiddle.net/vjf5ryhv but it still stinks. to do it properly instead of shared state one need to pass some information in iCheck call, but i did not find a way to do it

jquery - Select all checkbox with icheck - Stack Overflow

jquery checkbox icheck
Rectangle 27 0

I had the same issue with asp.net grid. Please use the on draw.dt event, that will help in paging and display menu as well

$('.data-table').on('draw.dt', function () {
    turn_on_icheck();
});

jquery - DataTables + iCheck + pagination - Stack Overflow

jquery datatables icheck
Rectangle 27 0

Like Nash3man said it could be a z-index issue. Personnaly for cross-browser custom checkboxes i use this plugin jquery: http://fronteed.com/iCheck/

javascript - Custom Checkboxes in IE8 / IE7 - Stack Overflow

javascript html css css3
Rectangle 27 0

For people still looking for plugin to control checkboxes through one that's lightweight, has out-of-the-box support for UniformJS and iCheck and gets unchecked when at least one of controlled checkboxes is unchecked (and gets checked when all controlled checkboxes are checked of course) I've created a jQuery checkAll plugin.

Feel free to check the examples on documentation page.

$( "#checkAll" ).checkall({
    target: "input:checkbox"
});

Jquery Checkbox check all - Stack Overflow

jquery
Rectangle 27 0

success: function (data) {
     var f = data.d;
     //alert(f);
     if (data.d != '') {
         if (parseInt(fe) >= 0) {
             $('#<%= div_formfields.ClientID %>').find('.form-group:eq(' + fe.toString() + ')').replaceWith(f);
         } else {

             $('#<%= div_formfields.ClientID %> hr').before(data.d);
         }
     }

     alert($('input[type="checkbox"].red, input[type="radio"].red').length);
     $('input[type="checkbox"].red, input[type="radio"].red').iCheck({
         checkboxClass: 'icheckbox_minimal-red',
         radioClass: 'iradio_minimal-red',
         increaseArea: '10%' // optional
     });

 }

Thanks for that hint. I mentioned async:false and it solved the issue. Hope you will remove the down vote for the question..

@sforsandeep don't use async false. BTW, what makes you think i downvoted question?

But that problem got fixed when I set async:false. Before that as you pointed that radios are not in DOM. Sorry for that... That was a false guess...

@sforsandeep please read over the net why you shouldn't use async false... I just shown you how you should do it, now if you prefer to use the worst workaround you could get, do what you want, it's up to you...

Yes.. I changed that to success callback and its working fine.. Thanks pal..

asp.net - JQUERY iCheck plugin not working for dynamic radio button - ...

jquery asp.net icheck
Rectangle 27 0

For people still looking for plugin to control checkboxes through one that's lightweight, has out-of-the-box support for UniformJS and iCheck and gets unchecked when at least one of controlled checkboxes is unchecked (and gets checked when all controlled checkboxes are checked of course) I've created a jQuery checkAll plugin.

Feel free to check the examples on documentation page.

$( '#select_all' ).checkall({
    target: 'input[type="checkbox"][name="select"]'
});

checkbox - Select all checkboxes with jQuery - Stack Overflow

jquery checkbox css-selectors
Rectangle 27 0

$('#container').iCheck({checkboxClass: 'icheckbox_flat-green',radioClass: 'iradio_flat-green'});

javascript - Apply iCheck (jQuery plugin) to dynamically created Check...

javascript jquery jquery-plugins icheck
Rectangle 27 0

You have to execute the isCheck function again once you append a new item dynamically. This instruction should be part of the click handler method:

$('body').on('click', '.add-new-option', function() { 
  $('.new-option-content').append('<div class="checkbox"> <label> <input type="checkbox"> Sample </label> </div>');
  $('input').iCheck({
    checkboxClass: 'checkbox-default',
    radioClass: 'radio-default'
  });
});

Better run plugin on new items only, not all $('input').

You are welcome, you can mark the answer as accepted if it solved your issue. Meanwhile you have to take @dfsq note into consideation :)

javascript - jQuery icheck plugin not working after being append - Sta...

javascript jquery html
Rectangle 27 0

Just run the check function again for current checkbox. The problem is that you append the checkboxes dynamically.

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


    $('body').on('click', '.add-new-option', function() { 
            $('.new-option-content').append('<div class="checkbox"> <label> <input type="checkbox"> Sample </label> </div>');
        var $lastCheckBox = $('.new-option-content').find('input').last();  
        console.log($lastCheckBox);
          $lastCheckBox.iCheck({
        checkboxClass: 'checkbox-default',
        radioClass: 'radio-default'
      }); 

    });

javascript - jQuery icheck plugin not working after being append - Sta...

javascript jquery html
Rectangle 27 0

$('input').iCheck({
            checkboxClass: 'icheckbox_minimal-grey',
            radioClass: 'iradio_minimal-grey'
        });

jquery - iCheck checkboxes not displaying - Stack Overflow

jquery ruby-on-rails checkbox asset-pipeline icheck
Rectangle 27 0

So I was having the same issue, it might be related to newer version of jQuery, but you need to specity the input type with your selector

$("input[type='checkbox'], input[type='radio']").iCheck({
        checkboxClass: 'icheckbox_minimal',
        radioClass: 'iradio_minimal'
    });

jquery - iCheck checkboxes not displaying - Stack Overflow

jquery ruby-on-rails checkbox asset-pipeline icheck
Rectangle 27 0

For people still looking for plugin to control checkboxes through one that's lightweight, has out-of-the-box support for UniformJS and iCheck and gets unchecked when at least one of controlled checkboxes is unchecked (and gets checked when all controlled checkboxes are checked of course) I've created a jQuery checkAll plugin.

Feel free to check the examples on documentation page.

$( '#select_all' ).checkall({
    target: 'input[type="checkbox"][name="select"]'
});

checkbox - Select all checkboxes with jQuery - Stack Overflow

jquery checkbox css-selectors