stop label from toggling the input checkbox - javascript

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

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.

There is CSS solution too:
label {
pointer-events: none;
cursor: default;
}

if you are using JQuery, add an id on your label then
add this in your script:
$("#lbl").click(function(){
return false;
});

Just prevent default on label or any part of label, if desired.
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false);
<input type="checkbox" id="1" />
<label class="prevent-default" for="1">foo</label>
or
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false);
<input type="checkbox" id="1" />
<label for="1">foo some part <span class="prevent-default">not</span> clickable</label>

"I have some logic that takes the id from the element "
You could remove the for-attribute, if you store the ID somewhere else. For example in a data-*-attribute:
<label data-input-id="startClientFromWebEnabled">
On the other hand, it is sometimes difficult to point and click an a check-box based on the styling and the capabilities of the user. There is are good reasons for using the for-attribute.

Related

How to show some text on click on disabled select [duplicate]

Apparently a disabled <input> is not handled by any event
Is there a way to work around this issue ?
<input type="text" disabled="disabled" name="test" value="test" />
$(':input').click(function () {
$(this).removeAttr('disabled');
})
Here, I need to click on the input to enable it. But if I don't activate it, the input should not be posted.
Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behaviour, it just does nothing at all when you click on a disabled element.
I can't think of a better solution but, for complete cross browser compatibility, you could place an element in front of the disabled input and catch the click on that element. Here's an example of what I mean:
<div style="display:inline-block; position:relative;">
<input type="text" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​
jq:
$("div > div").click(function (evt) {
$(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​
Example: http://jsfiddle.net/RXqAm/170/ (updated to use jQuery 1.7 with prop instead of attr).
Disabled elements "eat" clicks in some browsers - they neither respond to them, nor allow them to be captured by event handlers anywhere on either the element or any of its containers.
IMHO the simplest, cleanest way to "fix" this (if you do in fact need to capture clicks on disabled elements like the OP does) is just to add the following CSS to your page:
input[disabled] {pointer-events:none}
This will make any clicks on a disabled input fall through to the parent element, where you can capture them normally. (If you have several disabled inputs, you might want to put each into an individual container of its own, if they aren't already laid out that way - an extra <span> or a <div>, say - just to make it easy to distinguish which disabled input was clicked).
The downside is that this trick unfortunately won't works for older browsers that don't support the pointer-events CSS property. (It should work from IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events
If you need to support older browsers, you'll need to use one of the other answers!
Maybe you could make the field readonly and on submit disable all readonly fields
$(".myform").submit(function(e) {
$("input[readonly]").prop("disabled", true);
});
and the input (+ script) should be
<input type="text" readonly="readonly" name="test" value="test" />
$('input[readonly]').click(function () {
$(this).removeAttr('readonly');
});
A live example:
$(".myform").submit(function(e) {
$("input[readonly]").prop("disabled", true);
e.preventDefault();
});
$('.reset').click(function () {
$("input[readonly]").prop("disabled", false);
})
$('input[readonly]').click(function () {
$(this).removeAttr('readonly');
})
input[readonly] {
color: gray;
border-color: currentColor;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myform">
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<button>Submit</button>
<button class="reset" type="button">Reset</button>
</form>
I would suggest an alternative - use CSS:
input.disabled {
user-select : none;
-moz-user-select : none;
-webkit-user-select : none;
color: gray;
cursor: pointer;
}
instead of the disabled attribute. Then, you can add your own CSS attributes to simulate a disabled input, but with more control.
$(function() {
$("input:disabled").closest("div").click(function() {
$(this).find("input:disabled").attr("disabled", false).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div>
<input type="text" disabled />
</div>
Instead of disabled, you could consider using readonly. With some extra CSS you can style the input so it looks like an disabled field.
There is actually another problem. The event change only triggers when the element looses focus, which is not logic considering an disabled field. Probably you are pushing data into this field from another call. To make this work you can use the event 'bind'.
$('form').bind('change', 'input', function () {
console.log('Do your thing.');
});
OR do this with jQuery and CSS!
$('input.disabled').attr('ignore','true').css({
'pointer-events':'none',
'color': 'gray'
});
This way you make the element look disabled and no pointer events will fire, yet it allows propagation and if submitted you can use the attribute 'ignore' to ignore it.
We had today a problem like this, but we didn't wanted to change the HTML. So we used mouseenter event to achieve that
var doThingsOnClick = function() {
// your click function here
};
$(document).on({
'mouseenter': function () {
$(this).removeAttr('disabled').bind('click', doThingsOnClick);
},
'mouseleave': function () {
$(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
},
}, 'input.disabled');
I did something very similar the Andy E; except I used a surrounding tag. However, I needed the 'name' so I changed it to an tag without the 'href'.
There is no reason you can't simulate the disabled attribute using a combination of CSS and readonly:
Faux-Disabled: <input type="text" value="1" readonly="1" style="background-color:#F6F6F6;"><br>
Real-Disabled: <input type="text" disabled="true" value="1"></input>
Note: This will not have the regular behavior of disabled in the <form>, which prevents the server from seeing the field. This is just in case you want to disable a field that doesn't matter server-side.
I find another solution:
<input type="text" class="disabled" name="test" value="test" />
Class "disabled" immitate disabled element by opacity:
<style type="text/css">
input.disabled {
opacity: 0.5;
}
</style>
And then cancel the event if element is disabled and remove class:
$(document).on('click','input.disabled',function(event) {
event.preventDefault();
$(this).removeClass('disabled');
});
suggestion here looks like a good candidate for this question as well
Performing click event on a disabled element? Javascript jQuery
jQuery('input#submit').click(function(e) {
if ( something ) {
return false;
}
});

Label focus does not change css style

I have a simple form and wanted to highlight the focused labels by changing their background colors, but the jquery doesnt seem to work here.
The console does not show any errors. Could someone please help me on this?
<form action="" method="POST" id="qrForm">
<label for="enter1">Enter<input id='enter1' type="radio" name="enter"></label>
<label for="enter2">Exit<input id='enter2' type="radio" name="enter"></label><br>
<label for="device1">Took a device<input id="device1" type="radio" name="device"></label>
<label for="device2">Returned a device<input id="device2" type="radio" name="device"></label>
</form>
<script>
$("label").focus(function(){
$(this).css('background-color', '#00CC66');
});
</script>
I could actually finish it by adding/removing a class but I wonder why this one isn't working.
why use js when you can do it in CSS?
label:focus {
background-color: #00cc66;
}
you also want to add tabindex=0 if you want your label elements to be focusable though, as if you e.g. click on a label, the focus is moved to the related input element
Alternatively, you can use the css next sibling selector as below:
html:
<input type="text" id="foo" class="foo"><label for="foo">label</label>
and the css:
.foo:focus + label {
background-color: #00cc66;
}
or play with different markup and css selectors
You cannot trigger focus for a label using .focus() instead do it with input, Check here
$("input").focus(function(){
$('label').css('background', '#00CC66');
});
or
$("input").focus(function(){
$(this).closest('label').css('background', '#00CC66');
});
try this as you can't use focus on label -
$( "form input:radio" ).focus(function(){
$(this).parent('label').css('background-color', '#00CC66');
});

toggleClass() is not working as expected on label click

Alright, I'm working on a solution for custom checkboxes, I nest checkbox inside label and hide it, add some css to labels pseudo elements to display custom checkbox.
Now I want to add class .checked to a label on its click so related styles are applied, but for some reason I can't seem to get toggle class working, it simply doesn't add the class (addClass and removeClass) work, but thats a bit of a "dirtier" sollution.
JS
$('.label-checkbox ').on('click', function() {
$(this).toggleClass('checked');
});
HTML
<label class="label-checkbox" for="show-news">show news posts
<input type="checkbox" name="show-news" id="show-news">
</label>
Fiddle
https://jsfiddle.net/hhsxyknf/
No need to bind click on label, you can just call on change of the checkbox.
$('input[name="show-news"]').on('change', function() {
$(this).closest('label').toggleClass('checked');
});
.checked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="label-checkbox" for="show-news">show news posts
<input type="checkbox" name="show-news" id="show-news">
</label>
What you are doing is right, AFAIK. Check out this, do you want something like this? You may need to consider binding the event with the change event of the <input> than the <label>:
$(function () {
$('.label-checkbox input').on('change', function() {
$(this).closest(".label-checkbox").toggleClass('checked');
});
});
.checked {font-weight: bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label class="label-checkbox" for="show-news">show news posts
<input type="checkbox" name="show-news" id="show-news">
</label>
When label is clicked, you also click the checkbox; thus, you get two clicks and your class toggle goes to checked then immediately removes it.

Jquery preventDefault for the parent link only

I have input radios element as a children of a hyperlinks as the following:
<li ><input type="radio" class="searchSrc" name="searchSrc" value="2" style="display: inline" /> الشروق</li>
<li ><input type="radio" class="searchSrc" name="searchSrc" value="3" style="display: inline" /> الجزيرة</li>
<li ><input type="radio" class="searchSrc" name="searchSrc" value="4" style="display: inline" /> شبكة رصد</li>
I want to preventDefault only for the parent hyperlink of the input while keeping the accessibility of changing the radios values i.e clicking them.
I tried the following:
$(".searchSrc").parent().click(function(event){
event.preventDefault();
$(this).children('.searchSrc').attr('checked', this.checked);
//also I tried to place event.preventDefault(); in this line
})
However, I just able to click one time on a radio a button and I could not able to change the checked radio again.
<a> tag has no checked property . Your this is the <a> element.
To fix what you were trying to do should use prop() and can use it with function callback as follows:
$(".searchSrc").parent().click(function (event) {
event.preventDefault();
$(this).children('.searchSrc').prop('checked', function () {
return !this.checked
});
});
To work straight from the radios themselves would just do:
$(".searchSrc").click(function (event) {
event.stopPropagation();
});
I can't say that I understand why you would want radios inside an <a> tag...seems very strange to me.
DEMO
It's not really clear what you're trying to achieve in your setup, but if you don't want the anchor links around the inputs to be clickable, you should just remove them entirely and get rid of the javascript. They don't serve any purpose given what you're attempting to do. The radio buttons will be properly selectable at that point as well.
The click listener should be on the .searchSrc elements and you should use stopPropagation instead of preventDefault

How can my input element receive onclick events when it is set to disabled?

I need to have an onclick/hover event on an input tag which is disabled.
Is there another way but to wrap it in another tag and give that tag the events?
<input type="checkbox" onclick="cant_choose('event')" disabled="disabled" value="2" name="enroll_to[event][]">
You could simulate it being disabled with JavaScript and CSS.
That is, blur all focus it receives, and add a class with something like so.
input.disabled {
background: #d4d0c8;
color: #888;
cursor: default;
}
Update
See it in comparison with the normal and browser disabled input box on JSbin.
You could wrap the input field inside a container and bind the click event on it.
<div id='input-container'>
<input id='myText' disabled />
</div>
<script>
$('#input-container').click(function() {
alert('test');
});
</script>
http://jsfiddle.net/M2EYH/
If you have multiple disabled fields, and don't want to make an unique ID for each container, you can give the containers a class name instead of an ID.

Categories