Styling label css using jquery - javascript

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');

Related

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');
});

How do I display vertical radio buttons in the horizontal style using jquery-mobile?

Jquery-mobile can display sets of radio buttons on a horizontal grouping with the actual selection box suppressed and selection indicated by the background text colour by adding the attribute 'data-type="horizontal"'.
It can also display a vertical set, which retains the boxes and does not set the background colour, by setting 'data-type="vertical"'.
Is there a way to change the vertical styling to match the horizontal styling? That is, suppress the boxes and use the background text colour to indication selection.
FYI, we're using jquery-mobile 1.3.2.
This feature is not built into jQM, but you can make it happen with some CSS and script.
Given standard vertical markup:
<fieldset data-role="controlgroup" data-mini="true" class="vertBackground">
<legend>Vertical, mini sized:</legend>
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6a" value="on" checked="checked" />
<label for="radio-choice-v-6a">One</label>
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6b" value="off" />
<label for="radio-choice-v-6b">Two</label>
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6c" value="other" />
<label for="radio-choice-v-6c">Three</label>
</fieldset>
I gave the controlgroup a class of vertBackground to make the jQuery and CSS selectors specific to this group. I apply some CSS to hide the check marks and move the text back to the left of the button:
.vertBackground .ui-icon{
display: none;
}
.vertBackground .ui-btn-inner{
padding-left: 11px !important;
}
Finally I add script that checks when the radio buttons change, and add the class ui-btn-active to the label that is currently checked:
$(document).on("pageinit", "#page1", function(){
SetActive();
$(".vertBackground input[type='radio']").on("change", function(){
setTimeout(SetActive, 0);
});
});
function SetActive(){
$(".vertBackground .ui-radio-off").removeClass("ui-btn-active");
$(".vertBackground .ui-radio-on").addClass("ui-btn-active");
}
Here is a DEMO

Targeting a span that is wrapped around a radio input

My problem is fairly simple. I'm using a template to do styling. The way the template handles form inputs is it wraps them in span tags. To select the radio button, you have to change the class of the span to "checked". Using checked="checked" or checked in the input does not work.
Example:
<label class="radio">
<div class="radio" id="uniformed-undefined">
<span class="checked">
<input type="radio" name="grow" value="slash">
</span>
</div>
How can I target that <span class="checked"> based on the input name "grow" and the value "slash" ?
I've looked into .before() but I'm not sure that's the correct answer.
jQuery multiple attribute selector
and jQuery parent
$("input[name='grow'][value='slash']").parent("span");
$("span.checked:has(input[name='grow'][value='slash'])")
JS Fiddle: http://jsfiddle.net/RgN7H/1

Make a checkbox look like a button CSS

I think what I am trying to achieve can be done in a simpler manner. However I have little JS experience and none in the way of CSS. So I’m utilizing prebuilt CSS and JS code and subtlety modifying it. So I will explain my end goal and see if what I currently have is acceptable.
A top menu on the webpage that has push buttons and checkboxes that all visually look the same
I would like checkboxes to look like buttons, e.g. no checkbox only the label.
I would like for the checkbox to still retain its functionality as a checkbox given the JS code it is calling
Is the way I’m calling the JS code through the button and checkbox correct or too complicated?
JSFiddle
<li><a title="Zoom to U.S" input type="button" name="US" onclick="US();"><span>Zoom to U.S.</span></a></li>
<li><a title="Test 1 KML"><input type="checkbox" id="kml-red-check" name="kml-red-check" onclick="toggleKml("red");"><span>Test 1 KML</span></a></li>
.hidden {
position: absolute;
visibility: hidden;
opacity: 0;
}
input[type=checkbox]+label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked+label {
color: #f00;
font-style: normal;
}
<input type="checkbox" class="hidden" name="cb" id="cb">
<label for="cb">text</label>
http://css-tricks.com/almanac/selectors/c/checked/
Won't work on lt IE9 though.
edit: Following your markup it should be something like this:
<ul>
<li><input id="cb1" name="cb1-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb1\')',100);"><label for="cb1" onclick="setTimeout('checkIt(\'cb1\')',100);">text 1</label></li>
<li><input id="cb2" name="cb2-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb2\')',100);"><label for="cb2" onclick="setTimeout('checkIt(\'cb2\')',100);">text 2</label></li>
</ul>
And then check if the checkbox is checked or not in your function.
onchange / onclick in a checkbox doesn't work in IE
edited again: changed NAME attribute so you won't end up having problems further along the line. And added a little workaround for the unresponsive, though ultimately desired, onchange functionality in IE8. Eventually you should add a timer to your function, rather than inline.
function checkIt(e){
if(document.getElementById(e).checked){
alert('checked');
} else {
alert('unchecked');
}
}
It is not possible to change the appearence of a checkbox so radically using CSS.
What you CAN do though, is style a label element enough to make it look like a button. Due to the nature of the label element, clicking it will toggle the state of the checkbox keeping your functionality intact.
Here is how to do it
Markup
<li>
<label for="kml-red-check">I am a button!</label>
<input type="checkbox" id="kml-red-check" name="kml-red-check" onchange="toggleKml("red");">
</li>
Note that I've changed the onclick handler to onchange since now it is impossible to click the checkbox itself. Its value changes though when you click on the label
Styling
label[for="kml-red-check"]{
//Your CSS goes that makes the label look like a button goes here
}
#kml-red-check{
display:none;
}
<label>
<input type="checkbox" ng-model="vm.abc" ng-change="vm.go()"/>
<span>this is button add some css to lokking like a button</span>
</label>
this will work like button , if you don't want to show checkbox use this
<label>
<input type="checkbox" ng-model="vm.abc" ng-change=vm.go()" hidden=''/>
<span>this is button add some css to lokking like a button</span>
</label>
check it out here https://jsfiddle.net/h0ntpwqk/2/

Adding class to next element using jquery

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

Categories