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');
});
Related
I want to hide an element and a label based on value:
My html code looks like this
<form id="wrapper">
<label>
<input type="checkbox" value="Slider">
Slider
</label>
</form>
So using jquery i can find an input value that contains value="Slider" but the label still remains, because it it doesn't contain any id or class and I can't add anything there, so how can I hide it
$('#wrapper').find("input[value='Slider']").each(function(){
$(this).hide()
});
Here is a JSFIDDLE.
You need to hide the parent label element to hide input element and its sibling text:
$('#wrapper').find("input[value='Slider']").closest('label').hide();
Use .has() method to checking children of element.
$("label").has("input[value='Slider']").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" value="Slider">
Slider
</label>
<label>
<input type="checkbox" value="Slider2">
Slider2
</label>
You can try this:
$('#wrapper').find("input[value='Slider']").each(function(){
// $(this).hide(); If you want to hide input too
$(this).parent().hide();
});
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.
I have a radio group which is coming dynamically to my page. I was able to successfully disable any radio using php, but I want to add css property of text-decoration: line through on the disabled radio label. This is the code :
<div class="form-item form-type-radio form-item-example-pane-time-slot-1">
<input type="radio" id="edit-example-pane-time-slot-1-11" name="example_pane[time_slot_1]" value="11" class="form-radio">
<label class="option" for="edit-example-pane-time-slot-1-11">11 - 12 pm </label>
</div>
How is it possible using jquery ? My jquery code is this :
if ($('#edit-example-pane-time-slot-1-11').attr('disabled',true))
{
$(this).css('text-decoration', 'line-through');
}
and its not working.
You should be checking
if ($('#edit-example-pane-time-slot-1-11').attr('disabled')===true))
{$(this).siblings('label').css('text-decoration', 'line-through');}
Or to just disable it, you should use .attr('disabled','disabled'). Seems you mixed these two.
PS: Please read difference between == and === in JavaScript.
You can do this with just css
CSS adjacent sibling selector
CSS :disabled pseudo-class
.form-radio:disabled + .option {
text-decoration: line-through;
}
FIDDLE
Here's the code to add css for it.
$(this).siblings('label').css('text-decoration','line-through');
I am having html like this:
<form>
<div class="row">
<input type="radio" class="radio">
<label>Text</label>
<input type="radio" class="radio">
<label>Type</label>
</div>
</form>
Now I need to apply a class to each label immediate after each <input type="radio">.
I am using jquery like this:
if($('input').hasClass('radio')){
$(this).next().addClass('radio-url');
}
I am trying to add class 'radio-url' to each <label> immediately after radio tag.
What mistake have I did in this?
You can use .siblings()
$('input[type="radio"]').siblings('label').addClass('radio-url');
DEMO
Or
$('input[type="radio"]').next('label').addClass('radio-url');
DEMO2
You can use next() function
$("input:radio").next('label').addClass("radio-url");`
Try:
$(':radio').next().addClass('radio-url');
jsFiddle example (I threw a text input in there so you can see that it works on only radio inputs)
This answer doesn't directly answer your question!
I believe that your label should have the for attribute so that the label is associated with the radio button. This allows the user:
To check the radio button by clicking the label!
If the input type is text, clicking the label focuses the text input
For accessibility reasons
HTML
<div class="row">
<input type="radio" class="radio" id="text"></input>
<label for="text">Text</label>
<input type="radio" class="radio" id="type"></input>
<label for="type">Type</label>
</div>
JQuery
Search the label using the radio element's ID.
$('input[type="radio"]').each(function(){
var radioId = $(this).attr("id");
$("label[for='" + radioId + "']").addClass('radio-url');
});
Fiddle: http://jsfiddle.net/78zAB/
DEMO
$('input.radio').each(function () {
$(this).next().addClass('radio-url');
})
Use CSS element+element selector:
$('input:radio + label').addClass('theClass')
http://jsfiddle.net/ttnUU/
Works optimal
$('input[type=radio]').next('label').addClass('radio-url');
http://jsfiddle.net/q76FJ/
You need to loop through all radio buttons:
$('input[type="radio"]').each(function(){
$(this).next().addClass('radio-url');
});
Or
$("input[type='radio'] + label").addClass('radio-url')
Fiddle Example
Example 2
Posting this as an answer as all of the others are using the incorrect selector, or don't specify the label in next():
$('input.radio').next('label').addClass('radio-url');
.. which will add the class radio-url to all label elements which come immediately after an input with the class radio
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.