No se puede hacer clic en la etiqueta para seleccionar la casilla de verificación con el diseño de casilla de verificación de Bootstrap

3 minutos de lectura

Así que tengo el siguiente código:

// the loop
                $countId = 0;
                $dateOnce="";
                foreach ($postDates as $post):
                    if (substr($post->post_date, 0, 7) != $dateOnce) {
                        echo'
                            <div class="checkbox">
                                <label for="filterByPostDate-' . $countId . '">
                                    <input type="checkbox" id="filterByPostDate-' . substr($post->post_date, 0, 7) . '" class="postDateFilters postDateFilterCb-' . $countId . '" name="filterByPostDate-' . $countId . '" value="' . substr($post->post_date, 0, 7) . '" '; if (isset($_SESSION["filterByPostDate"])) { $key = array_search(substr($post->post_date, 0, 7), $_SESSION["filterByPostDate"]); } else { $key = false; } if($key !== false) { echo 'checked'; } echo ' />
                                    ' . date('M, Y', strtotime($post->date_part)) . '
                                </label>
                            </div>
                        ';
                    }
                    $dateOnce = substr($post->post_date, 0, 7);
                $countId++;
                endforeach;
                // END the loop

Que genera casillas de verificación y etiquetas para la interfaz de wordpress. Pero cuando hago clic en la etiqueta de cada casilla de verificación, la casilla de verificación no se selecciona.

Aquí hay un js violín que muestra el problema.

Saludos por la ayuda.

  • La etiqueta “para” y la casilla de verificación “id” deben ser iguales. ejemplo de trabajo

    – imskm

    29 de mayo de 2017 a las 0:26

debes incluir el id de tu elemento en
<label for="">

<div class="checkbox">
  <label for="filterByPostDate-2011-12">
    <input type="checkbox" id="filterByPostDate-2011-12" class="postDateFilters postDateFilterCb-0" name="filterByPostDate-0" value="2011-12"  />
    Dec, 2011
  </label>
</div>

<div class="checkbox">
  <label for="filterByPostDate-2012-01">
    <input type="checkbox" id="filterByPostDate-2012-01" class="postDateFilters postDateFilterCb-6" name="filterByPostDate-6" value="2012-01"  />
    Jan, 2012
  </label>
</div>

  • Jaja no puedo creer que me perdí eso. Gracias por la ayuda ^_^

    – Desarrollador web

    29 de mayo de 2017 a las 1:36

avatar de usuario
Brett Este

En realidad no necesitas el for atributo en su etiqueta, para que el navegador le permita hacer clic y seleccionar la casilla de verificación. Si envuelves tu <label> etiqueta alrededor de la entrada, entonces el navegador sabe que es ‘para’ ese campo.

Sin embargotambién debe incluir el for atributo, ya que no todas las tecnologías de asistencia reconocen la relación entre la etiqueta y la entrada. Como se mencionó, el mayor problema con su código es que está diciendo que la etiqueta es ‘para’ algo más que la entrada que envuelve.

Aquí hay un violín de trabajo actualizado. https://jsfiddle.net/BrettEast/ffgL77qo/usando el atributo correcto para.

  • Sin embargo, debería usarlo si desea cumplir con la accesibilidad.

    – charlietfl

    29 de mayo de 2017 a las 0:25

  • @charlietfl muy cierto! Ambos, deben hacerse, actualizaré mi respuesta.

    – Brett Este

    29 de mayo de 2017 a las 0:42

avatar de usuario
imskm

Atributo de etiqueta for y casilla de verificación id debe ser igual.

<label for="checkbox1">I have a bike</label>
<input id="checkbox1" type="checkbox" name="vehicle1" value="Bike">


<label for="checkbox2">I have a car</label>
<input id="checkbox2" type="checkbox" name="vehicle1" value="Car">

avatar de usuario
SaidbakR

el atributo for en label la etiqueta debe tener el mismo valor que la id atributo del campo. Verificar esta referencia. En su ejemplo de código, obviamente hay dos valores diferentes.

De lo contrario, puede omitir la for atributo y manteniendo el campo de entrada dentro de él:

<label>Check this
  <input type="checkbox" name="any" value="1">
</label>

jsbin manifestación.

Revisa este código. deberías for en la etiqueta y id para casilla de verificación. Desearía que ya tuvieras la respuesta.

<div class="checkbox">
   <label for="filterByPostDate-2017-05">
   <input type="checkbox" id="filterByPostDate-2017-05" class="postDateFilters postDateFilterCb-01" name="filterByPostDate-01" value="2017-05"/>May, 2017
	 </label>
</div>
							
<div class="checkbox">
		<label for="filterByPostDate-2017-06">
			<input type="checkbox" id="filterByPostDate-2017-06" class="postDateFilters postDateFilterCb-02" name="filterByPostDate-2" value="2017-06" />June, 2017
		</label>
</div>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad