Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

stop label from toggling the input checkbox

I have the following html code. When clicking on the label it toggles the checkbox.

<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>

How can I prevent this? If I remove the for="startClientFromWebEnabled", It stops toggling but I need this because I have some logic that takes the id from the element that fires the event ...

like image 693
Mdb Avatar asked Oct 16 '12 10:10

Mdb


People also ask

How to disable checkbox label?

Try . form-checkbox-left + input[type=checkbox]:disabled . Note the + operator.

How do I disable click event on label?

If you disable the input then the label click action will also be disabled. If you want to stop the label click only (which is a bit silly IMO) then you can change the HTML generated so that the input is outside of the label . Don't do that. Labels are clickable for a reason, they make the control easier to use.

Should checkbox label be clickable?

Clickable Checkbox Label Without label tags, users can't click the label to tick the checkbox. Instead, they have to click the checkbox itself. This causes users to struggle because the checkbox is a small target to hit especially for motor-impaired users.


2 Answers

The best solution would be to let label toggle the checkbox as that is intuitive and expected behaviour.

Second best solution is to make sure your checkbox is not nested inside label and label does not have for attribute. If you have some logic that depends on it, you can put data attributes on elements and use those in your logic.

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

Last resort

You could prevent the default behaviour of the click event using jQuery:

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

Please see this jsFiddle for an example.

like image 160
BenM Avatar answered Oct 06 '22 18:10

BenM


There is CSS solution too:

label {
   pointer-events: none;
   cursor: default;
}
like image 38
T.Todua Avatar answered Oct 06 '22 18:10

T.Todua