Foundation 4.0.9 Custom form check boxes not working

[andig]

Custom form check boxes are not working ever since 4.0.4:

• clicking the actual checkbox does not do anything
• clicking the label does trigger a js error:
  TypeError: e is null @ filefoundation.js:13
  Reviewed on both Chrome and Firefox

[andig]

This is the generated HTML:

<label>Automatic DiskID
</label> 
<input style="display: none;" name="autoid" id="autoid" value="1" checked="checked" type="checkbox">
<span class="custom checkbox checked"></span> 

[andig]

Using jquery instead of zepto the error message changes slightly:
TypeError: e is undefined @ foundation.min.js:13

[andig]

Looking into the foundation.form code I believe the problem may be with the usage of the jquery next(selector) function:

.on('click.fndtn.forms', 'form.custom label', function (e) {
  var $associatedElement = $('#' + self.escape($(this).attr('for')) + ':not([data-customforms="disabled"])'),
      $customCheckbox,
      $customRadio;

  if ($associatedElement.length !== 0) {
    if ($associatedElement.attr('type') === 'checkbox') {

      e.preventDefault();
      $customCheckbox = $(this).find('span.custom.checkbox');

      //the checkbox might be outside after the label
      if ($customCheckbox.length == 0) {
        $customCheckbox = $(this).next('span.custom.checkbox');

      }
      //the checkbox might be outside before the label
      if ($customCheckbox.length == 0) {
        $customCheckbox = $(this).prev('span.custom.checkbox');

      }
      self.toggle_checkbox($customCheckbox);

When foundation looks for the span element related to the label (span itself apparently isn't clickable at all which is confusing), it looks for the span element next or prev to the current label that matches the required style. Unfortunately, the next() element to the label in this case isn't the span but the input.
jQuery next(selector) doesn't take the next element matching the selector but apparently takes the next element (exactly the following one) if and only if the selector matches- and this is where the code fails to find the span.
Check this fiddle to see the problem: http://jsfiddle.net/g8yvw/

[andig]

Proposed fix: according to http://stackoverflow.com/questions/13899806/jquery-next-returning-nothing nextUntil() should be used instead of next for this use case.
As nextUntil doesn't exist on zepto, siblings() might be another valid alternative.

[andig]

Code needs to be changed like this:

.on('click.fndtn.forms', 'form.custom label', function (e) {
  var $associatedElement = $('#' + self.escape($(this).attr('for')) + ':not([data-customforms="disabled"])'),
      $customCheckbox,
      $customRadio;
  if ($associatedElement.length !== 0) {
    if ($associatedElement.attr('type') === 'checkbox') {
      e.preventDefault();
      $customCheckbox = $(this).find('span.custom.checkbox');
      //the checkbox might be outside after the label
      if ($customCheckbox.length == 0) {
        $customCheckbox = $(this).siblings('span.custom.checkbox').first();
      }
      self.toggle_checkbox($customCheckbox);
    } else if ($associatedElement.attr('type') === 'radio') {
      e.preventDefault();
      $customRadio = $(this).find('span.custom.radio');
      //the radio might be outside after the label
      if ($customCheckbox.length == 0) {
          $customCheckbox = $(this).siblings('span.custom.radio').first();
      }
      self.toggle_radio($customRadio);
    }
  }
})

[mrsweaters]

@andig Could you create a pull request with these changes?

[tomascharad]

Hi,

@andig do you know if this problem has any relation with what is happening to me?

http://stackoverflow.com/questions/18220560/dropdown-select-list-wont-display-items-with-custom-forms-of-zurb-foundation-4