dciccale / custom-radio-checkbox Goto Github PK

Perhaps there's already a way to do this but I didn't see one: It would be nice if there was a function that could be called after content is loaded via AJAX to convert the checkboxes in the AJAX content.

Hello:

The fake radio and checkboxes are not themselves active: you can only click on the label to set them.

Here is a diff to activate them:

57a58,62

      // make fake input active 
              $(this).prev().click(function () {
              $(this).next().click();
              });

80a86,90

      // make fake input active 
              $(this).prev().click(function () {
              $(this).next().click();
              });

I noticed that the checkbox element can only be clicked if it's inside the label tag. If it is outside the label tag, only the label can be clicked to change the status of the checkbox. For example:

<form>
    <input type="checkbox" name="Checkbox" id="checkbox1" value="1" />
    <label for="checkbox1">This checkbox won't be clickable</label>
</form>

<form>
    <label for="checkbox1">
        <input type="checkbox" name="Checkbox" id="checkbox1" value="1" />This one will be clickable!
    </label>
</form>

I believe the W3C would prefer that input elements are outside of label tags:

http://www.w3.org/TR/html4/interact/forms.html

Currently using Custom-radio-checkbox and everything works, except on touch devices. The class changes on touch, so it appears the checkbox has been checked, but it doesn't. It only changes the appearance, not the hidden input's state.

Would it be possible to add an option to only change checkboxes or only change radio buttons? I'm trying to use the jquery UI buttonset() on my radio buttons and customRadioCheckbox() is interfering.

Could you add a bower.json and tag your releases according to Semantic Versioning?

See http://bower.io/docs/creating-packages

I could do the work for you in case you’re accepting a pull request for that

When setting $('.foo').prop('checked', false) the checked class does not automatically get removed from the <i>-element. At the moment you have to do a workaround like this:

jQuery('input[type=checkbox]')
    .prop('checked', false)
    .next()
    .removeClass('checkbox-checked');