Disable single checkbox after ButtonSet is applied - javascript

If I apply buttonset to a list of checkboxes using JQuery UI, how do i then disable a single checkbox from the list?
HTML
<div id="options">
<input id="one" type="checkbox" value="1"/><label for="one">One</label>
<input id="two" type="checkbox" value="2"/><label for="two">Two</label>
</div>
Javascript
$('#options').buttonset();
In the above example after buttonset is applied, I want to disable only checkbox with label Two.
Edit
Here is the JSFiddle for the above example. Just by adding attribute disabled does not help.

You have to refresh the button widget after disabling the check box:
$("#two").prop("disabled", true).button("refresh");
Updated fiddle here.

$("#two").attr("disabled", "disabled");
//OR
$("#two").attr("disabled", true);

Related

If I select first checkbox then disable all remaining checkboxes

I have four check boxes inside a separate label.
If I select first check box then all remaining check boxes will be disable. If I click first again, all check boxes will be enabled.
If I select any other check box, the others are still enabled: I can select more than one. See image here
How can I set this up?
Try this:
HTML:
<label for="one"><input type="checkbox" name="one" id="one"></label>
<label for="two"><input type="checkbox" name="two" id="two"></label>
<label for="three"><input type="checkbox" name="three" id="three"></label>
<label for="four"><input type="checkbox" name="four" id="four"></label>
jQuery:
$('input[type="checkbox"]').on('change', function() {
if($('input[type="checkbox"]').eq(0).is(':checked')){
$('input[type="checkbox"]').not($(this)).attr('disabled', true);
}
else{
$('input[type="checkbox"]').not($(this)).attr('disabled', false);
}
});
Working example: https://jsfiddle.net/e26vnnk2/
If you are asking in order to find out how to disable all other "checkboxes," use radiogroups. If you are saying that the first checkbox auto-triggers a toggle on the other checkboxes, try ungrouping them, or making them separate in and of themselves, because it sounds as if you have some kind of faulty grouping and dependency there.

jquery mobile: get selected radiobutton

I'm not sure how can I get the selected radio button in jQuery mobile (I'm using version 1.4.3). The checked attribute doesn't change whenever I click one of the radio buttons. Actually, when I inspect the elements I see that only attribute data-cacheval is changing. Is it safe to use this attribute to get the selected radio button? This is the code I'm using for the radio buttons:
<input type="radio" name="chkViewType" id="chkViewType2" data-mini="true">
<label for="chkViewType2" data-mini="true">List</label>
<input type="radio" name="chkViewType" id="chkViewType1" data-mini="true">
<label for="chkViewType1" data-mini="true">Map</label>
You can use the :checked selector:
e.g.
$("[name='chkViewType']:checked")
Also, you should probably read the Attributes vs. Properties paragraph in the documentation.

Reload div at checkbox click

Is it possible for me to reload a div when a checkbox in the same document is clicked?
<html:checkbox property="checkbox" styleId="checkbox">
<div id="divToBeRefreshed">
//content
</div>
I'd rather do it using pure javascript but ajax is ok too if there isn't another solution.
Well the answer by #karthick is for change event it will reload the content if the checkbox is unchecked also you can use the below code
$('#checkbox').change(function(){
if($(this).is(':checked')){
// Checkbox is checked.
$("#divToBeRefreshed").html('your content');
}else{
// Checkbox is not checked.
}
});
make your id of checkbox is set to
id='checkbox'
Hope this help you
try this
$("#checkbox").on('change',function(){
$("#divToBeRefreshed").html('your content');
});
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse.Hope this is what u meant mate
HTML
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<div id="divToBeRefreshed">
</div>
JS
$("input[name=vehicle]").on('change',function(){
$("#divToBeRefreshed").html($(this).val());
});
if you want to fire an event when a checkbox is checked / unchecked: use the below code too.
if( $(this).is(':checked') )
Fiddle
http://jsfiddle.net/BzgrW/

Overwrite checked radio button and check other one

I have two radio buttons. One is checked by default but I want to uncheck that one and check an other one by default.
So I have this HTML:
<div class="gui-radio">
<input type="radio" value="register" name="choise" id="new-register">
<label for="register">Register</label>
</div>
<div class="gui-radio">
<input type="radio" checked="checked" value="guest" name="choise" id="new-guest">
<label for="new-guest">Guest</label>
</div>
This all automatically generated. I need this to be done with Jquery.
So How do I uncheck the second one and check the first one?
jQuery 1.6+
You can check a checkbox by setting .prop('checked', true); and uncheck it by setting .prop('checked', false);.
$('#new-register').prop('checked', true);
$('#new-guest').prop('checked', false);
jQuery 1.5 and below
$('#new-register').attr('checked','checked');
$('#new-guest').removeAttr('checked');
This checks the first radio:
jQuery('input#new-register').prop('checked', true);
Also closing the inputs might be a good idea:
<div class="gui-radio">
<input type="radio" value="register" name="choise" id="new-register" />
<label for="register">Register</label>
</div>
<div class="gui-radio">
<input type="radio" checked="checked" value="guest" name="choise" id="new-guest" />
<label for="new-guest">Guest</label>
</div>
jsfiddle link
They are already connected by their name attributes, so all you need to do is make the first one checked - the second one will automatically become unchecked, because in a radio group only one can be selected.
This is how you make a radio/checkbox checked in jQuery:
$('#new-register').prop('checked', true);
Remember to use prop, not attr.
jsFiddle Demo

Clear Checkbox when Radio Button selection is Changed

I am using a form builder with field IDs in Wordpress. I need to uncheck a specific checkbox if a specific radio button selection is changed. The radio button's field ID is 180. The checkbox's field ID is 640. Here's what I tried first:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[180]"]').change(function(){
$('input[name="item_meta[640]"]').val('');
})
})
</script>
Note that this script was originally written to change the value of a dropdown, not a menu. The only change I made to the code was changing "select" to "input" on line 3.
I've also tried changing
.val('');
to
.attr('checked', false);
and also to
.removeAttr('checked');
None of these work. The checkbox remains checked when the radio button is changed. Does anyone have any ideas? Thanks in advance!
UPDATE: Here are the two relevant form fields in HTML:
<div id="frm_field_180_container" class="frm_form_field form-field frm_required_field frm_top_container">
<label class="frm_primary_label">Pricing Categories
<span class="frm_required">*</span>
</label>
<div class="frm_description">Select your meta-category then locate your entry fee in the subsequent dropdown.</div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-0" value="Independent Film & Videos" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-0">Independent Film & Videos</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-1" value="Film / Video for TV & Cable Production" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-1">Film / Video for TV & Cable Production</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-2" value="TV Ads, PSAs, Screenplays, New Media, Websites, etc." class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-2">TV Ads, PSAs, Screenplays, New Media, Websites, etc.</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-3" value="Student Entry of Any Category (with 2 Additional Categories Free) - $45" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-3">Student Entry of Any Category (with 2 Additional Categories Free) - $45</label></div>
</div>
and
<div id="frm_field_640_container" class="frm_form_field form-field frm_top_container frm_last_third">
<label class="frm_primary_label">Apply Early-Bird Discount
<span class="frm_required"></span>
</label>
<div class="frm_opt_container"><div class="frm_checkbox" id="frm_checkbox_640-0"><input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5" /><label for="field_640-0">1-3 Categories: $5</label></div>
</div>
The following approach appears to work:
$('input[name="item_meta\\[180\\]"]').change(function(){
$('input[name="item_meta\\[640\\]\\[\\]"]').prop('checked',false);
});
JS Fiddle demo.
Note that I removed the onclick (since they weren't defined, their absence generated errors, and if you're using jQuery why are you even using in-line event-handlers?). Also, the escaping of the square-brackets (using the \\ characters).
References:
prop().
You've got a mismatch for the name of the checkbox, between your HTML and your JQuery . . .
HTML
<input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5" />
Here, the name attribute is item_meta[640][].
JS
$('input[name="item_meta[640]"]').val('');
Here, the name attribute is item_meta[640].
Because of that, the selector is not matching the checkbox. If you update you JQuery selector to $('input[name="item_meta[640][]"]'), it should work fine.
As noted by Dave Thomas, you are better going with .prop('checked', false); to uncheck the box.

Categories

Resources