Double checkboxes [#2651042]

I'm creating checkboxes via FAPI.

  $form['test'] = array(
      '#type' => 'checkboxes',
      '#title' => 'Testing',
      '#options' => array(
          '1' => 'yes',
          '2' => 'no',
      ),
      '#required' => true,
  );

When I render the form, I'm getting double checkboxes for each option (see attached image).

Here's the HTML:

<div class="form-item form-type-checkboxes form-item-test">
  <label class="control-label" for="edit-test">Testing <span class="form-required" title="This field is required.">*</span></label>
 <div id="edit-test" class="form-checkboxes"><div class="form-item form-type-checkbox form-item-test-1">
   <input type="checkbox" id="edit-test-1" name="test[1]" value="1" class="form-checkbox">
  <label class="control-label" for="edit-test-1">
    <input type="checkbox" id="edit-test-1" name="test[1]" value="1" class="form-checkbox">yes
  </label>
</div>
<div class="form-item form-type-checkbox form-item-test-2">
 <input type="checkbox" id="edit-test-2" name="test[2]" value="2" class="form-checkbox">
  <label class="control-label" for="edit-test-2">
    <input type="checkbox" id="edit-test-2" name="test[2]" value="2" class="form-checkbox">no
  </label>
</div>

Comment	File	Size	Author
	double_checkboxes.png	7.09 KB	dkingofpa

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

15 January 2016 at 17:42

dkingofpa created an issue. See original summary.

Comment #2

ianchan CreditAttribution: ianchan commented 19 January 2016 at 03:00

I've encountered the same issue when creating a Boolean/Checkbox field via the admin interface. Two checkboxes are visible in the webform (see code below). Both have the same id and name, one renders inside the field's label tag. I looked through the code in Bootstrap templates/system files but haven't yet found the issue.

Here is the problematic HTML.

<div class="form-item webform-component webform-component-boolean webform-component--record-wrapper--your-historical-record--years-wrapper--current checkbox">
  <label title="" data-toggle="tooltip" class="control-label" for="edit-submitted-record-wrapper-your-historical-record-years-wrapper-current" data-original-title="Check this box if the building is still intact.">Current? 
    <input type="checkbox" id="edit-submitted-record-wrapper-your-historical-record-years-wrapper-current" name="submitted[record_wrapper][your_historical_record][years_wrapper][current]" value="1" class="form-checkbox">
  </label>
  <input type="checkbox" id="edit-submitted-record-wrapper-your-historical-record-years-wrapper-current" name="submitted[record_wrapper][your_historical_record][years_wrapper][current]" value="1" class="form-checkbox">
</div>

Comment #3

madmanmax CreditAttribution: madmanmax commented 7 February 2016 at 23:00

Status:

Active

» Needs review

I think I know what the issue is here. Most likely you are sub-theming bootstrap and overwriting theme_form_element in your sub-theme. If you copied the original implementation from includes/form.inc then you probably have something like this:

switch ($element['#title_display']) {
        case 'before':
        case 'invisible':
            $output .= ' ' . theme('form_element_label', $variables);
            $output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
            break;

        case 'after':
            $output .= ' ' . $prefix . $element['#children'] . $suffix;
            $output .= ' ' . theme('form_element_label', $variables) . "\n";
            break;

        case 'none':
        case 'attribute':
            // Output no label and no required marker, only the children.
            $output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
            break;
    }

So the problem is that it that the html for the input checkbox is added twice:

once when appending the content of the $element['#children'] to the $output (this is the input outside the label)
again when calling theme('form_element_label') which returns the label with the input inside it

And that's how you end up with the two inputs. If you use the bootstrap_form_element then you will not run into this issue. So I think this issue can be closed since it works as expected unless you're overwriting theme_form_element.