How can I use jQuery to make a group of radiobuttons inactive? - javascript

I want to have a group of radiobuttons that are inactive until a checkbox is clicked.
In other words, when the user checks a checkbox, it will allow the user to use the radiobuttons. If the user unchecks a checkbox, it will make the radiobuttons inactive, so the user cannot select them anymore.
Is there a solution using jQuery that I can use to achieve this?

Assuming that the radiobuttons have all the same name, then you can use the attribute selector for this:
$('#checkboxid').click(function() {
$('input[name="radiobuttonname"]').attr('disabled', !this.checked);
});
This will enable the radiobuttons if the checkbox is checked and disable when unchecked.

Related

getting the button enable or disable if the radio button is checked or unchecked

How to Enable a button in html if the radio button is checked. this is to be done dynamically as if the radio button gets unchecked the button should also get disabled automatically. is there any possible way to do this using javascript or Jquery..code should should be in php
You can't uncheck a radio button, but if you want to do it on a checkbox, here is a suggestion using jquery:
$("#checkBoxID").on("change", function(e) {
$("#buttonID").prop("disabled",!$("#checkBoxID").is(":checked"));
});
This will set the disabled attribute on the button to the opposite of the checked attribute.
•Box Checked? Disabled Attribute on button set to false
•Box unchecked? Disabled attribute on button set to true
Updates dynamically as the checkbox is selected.
-- edit --
Here is a link to a JSFiddle of this working as described and requested.

Clearing a form inputs except some controls

I have a panel named pBody and I can clear its controls by using these codes.
clear all textboxes, uncheck radio buttons and checkboxes:
$('#pBody input').val('');
clear only textboxes:
$("#pBody").find("input[type=text]").val('');
or
$("#pBody").find("input:text").val('');
But after clicking clear button I want make some radio buttons checked, for example first radio buttons in the group.
Thanks in advance.
You can use input[type=radio]:first selector to select first radio-button in the list.
Or if you want that every gruop first radio button get selected you can use
$('element').each(function(){
$('input[type=radio]:first', this).attr('checked', true);
});
For check the first radio button as default you can use the below code
$('#pBody').find('input:radio').first().prop({checked:true});
or
$('#pBody').find('input:radio').first().attr({checked:true});
and for checkboxes use
$('#pBody').find('input:checkbox').first().prop({checked:true});
or
$('#pBody').find('input:checkbox').first().attr({checked:true});

Uncheck all (auto generated) checkboxes

I have a page with 10-25 checkboxes, for a User to choose from.
The checkbox Name and Value are unique to every User/choice and is handled appropriately in the backend.
So, without relying on those two properties, is it possible to create a simple "Uncheck all" button that will uncheck all the checked checkboxes?
I guess it's OK to use the ID attribute, I can add one to the template.
The page is built with HTML and JQuery 2.0.3
Here is a sample checkbox:
<input type="checkbox" name="10953734" value="82S1X93">
here is a small jQuery to solve your issue.
$("input[name='10953734']").prop("checked", false);
or if you want all check box inside a container to be unchecked
$("#containerID input[type='checkbox']").prop("checked", false);
Add a class to them:
$("input.myClass").prop("checked", false);

Dropdown Check List Radio Unselect

I use this very nice plugin in my project called jQuery Dropdown Check List (https://code.google.com/p/dropdown-check-list/) specifically one of example which is named: 'Single select with radio buttons instead of checkboxes'.
One big problem with this example is that I am not able to (I was trying to do this by jQuery) set radio button unchecked. I was using for example:
$("input:radio").attr("checked", false);
Or
$("input:radio").removeAttr("checked");
And unfortunately nothing. Can anyone give some advice how fix this thing?
Try this:
- For check:
$("input:checkbox").attr("checked", "checked");
or
$("input:checkbox").prop('checked', true);
-For uncheck:
$("input:checkbox").removeAttr("checked");
or
$("input:checkbox").prop('checked', false);
I tried both methods in the demo page(http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html) for the "Single select with radio buttons instead of checkboxes", and turns out to be fine: the selected radio button has removed. However, the value stays in the span because remove selected radio cannot remove selected value.
My suggestion is that after you uncheck the radio, also set a html space to the span, it removes the selected value and also keep the height of its container.
This plugin uses checkbox not radio inputs so you must use $('input:checkbox') or $('input[type="checkbox"]') as your selector!
Click here to see a demo!

check next not disabled radio button

I have a bunch of radio buttons, and depending on the choices of other radio buttons, some of radio's are disabled. The problem is that they the disabled ones remain checked. It's hard to explain this and it's not something I can show in code, because it's just a bunch of garbage and experiments.
So anyway, my question is, how do you find the first not disabled radio button in a radio button group (same name)?
Thanks for your help.
$(':radio:not(:disabled):first')
without first it will find all not disabled radios.
You can find all radiobuttons with :radio
You can reduce that result with :not
You can target all disabled elements with :disabled
You can return the first element from the given set with :first
$('input:radio:not(:disabled):first')
If you want to find out which radiobutton is checked, disregarding any disabled ones, you may want to do something like
$('input:radio:checked:not(:disabled)')

Categories

Resources