etichetta di arresto dalla casella di controllo di input

Question

Ho il seguente codice html. Facendo clic sull'etichetta, attiva la casella di controllo.

<td><label for="startClientFromWebEnabled">Client Launch From Web:</label></td> 
<td><input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="startClientFromWebToggleRequiredAttribute()" /></td> 

Come posso evitare questo? Se rimuovo il for="startClientFromWebEnabled", smette di commutazione, ma ho bisogno di questo perché ho un po 'di logica che prende l'id dall'elemento che genera l'evento ...

Answer 1

la soluzione migliore sarebbe quella di lasciare etichetta alternare la casella di controllo come quello è il comportamento intuitivo e previsto.

La soluzione secondo migliore è quella di assicurarsi che la casella di controllo non sia nidificata all'interno dell'etichetta e che l'etichetta non abbia l'attributo for. Se si dispone di una logica che dipende da esso, è possibile inserire gli attributi dei dati sugli elementi e utilizzarli nella logica.

<input type="checkbox" data-myid="1" /> 
 
<label data-myid="1">foo</label>

Last resort

Si potrebbe evitare che il comportamento predefinito dell'evento click utilizzando jQuery:

$('label[for="startClientFromWebEnabled"]').click(function(e) { 
    e.preventDefault(); 
});​ 

consulta questo jsFiddle per un esempio.

Answer 2

se si utilizza JQuery, aggiungere un id sull'etichetta allora aggiungere questo nello script:

$("#lbl").click(function(){ 
    return false; 
}); 

Answer 3

"Ho un po 'la logica che prende l'id dall'elemento"

Si potrebbe rimuovere il for -attribute, se si memorizza l'ID da qualche altra parte. Ad esempio in un data-* -attribute:

<label data-input-id="startClientFromWebEnabled"> 

D'altra parte, a volte è difficile da puntare e fare clic su una di una casella di controllo basato sullo stile e le capacità degli utenti. Esistono buoni motivi per utilizzare l'attributo for.

Answer 4

C'è soluzione CSS troppo:

label { 
    pointer-events: none; 
    cursor: default; 
}