I know we can't make readonly radio button and checkbox. I tried to disable radio button and checkbox but in IE it is not visible.
Is any alternative way to do the same like disabled / readonly using jQuery, CSS, JavaScript?
You can use the following code to avoid clicks on elements you don't want user to change
$(':radio,:checkbox').click(function(){
return false;
});
You can use proper selector to limit the clicks.
Yon can write like this:-
in your script:
jQuery('#radio').attr('disabled','disabled');
or you can add class according to you..
if it will not compatible with IE give compatibility also..
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
then check..
you can also try this:
jQuery("#youridname input:radio").attr('disabled',true);
selectedRow
.find('input[type="radio"]:not(:checked)')
.each(function(){
$(this).attr('disabled', true);
});
selected row is just the HTML element below which I want to locate the radio buttons I am interested.
the whole script is only called once a radio button has been selected.
when executed, it locates the unselected radio buttons and disables them.
hence, giving me the desired result of disabling the non-selected radio buttons, while maintaining the selected option.
this result seemed to be a better option, then
1. laying an image over the radio button, to avoid the user from selected another option.
2. .click(function(){ return false; }), which just hides the selection when the unselected option is selected
3. disabling all the radio buttons, where the selection is lost.
hope this helps you,
cheers.
If radio button is already checked and if you click on checked radio button it change value from true to false. For this scenario following code works
$(document).ready(function () {
$('input[type = "radio"]').change(function () {
this.checked = false;
});
});
Related
I am not good at Jquery but trying to fix something, I have a toggle function showing the div on checking a checkbox and hide the div on un-checking the checkbox, in the div I have radio button value LEFT, WHOLE, RIGHT. What Im trying to do is when someone check the checkbox it toggle the div and "WHOLE" option should select by default from radio box and this option deselect when toggle is hidden.
I have below code
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
$("input:radio[value='whole']").attr('checked',true);
});});
Problem is when toggle show the div it check the WHOLE in button but it effect on all other hidden divs. I want to select WHOLE only for that div which is toggled and rest are remain unchecked.
I have searched the whole internet but not found anything, again I am not Jquery expert I am internee.
http://dhowcruisemarina.com/pizza/product/build-your-own-pizza/ here once you check the Olives from the option "VEGGIES & GOOD STUFF " all its options (radio buttons) will toggle and I want to check WHOLE only for olives. In my case all other hidden divs options are selected as WHOLE and shows in the Checkout Page.
You need to target the specific radio button.
$("input:radio[value='whole']") This targets every radio input with a value of 'whole'
I can't give the exact answer without seeing your HTML but basically you need to target the radio button with a value of whole in the specific div only like this
$("#divId > input:radio[value='whole']")
https://api.jquery.com/child-selector/
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});
I have three custom buttons and they works like a radio.
I wanted to add something extra in this but I am not figuring out how .
There are three buttons currently (can be more) I can select only one . If I select any one color of the button will change and will show as it is active. I am wanting if I again click on this selected button this will unselect.
It should stay as a radio type but on addition I am wanting above requirement.
HERE is my JS fiddle DEMO
JS
$('.toggleButtonRadio').click(function(){
$('.toggleButtonRadio').removeClass("active");
$(this).toggleClass("active");
});
The problem is that you remove the active class before the toggle, so it doesn't remove it, you can change your code to this:
$('.toggleButtonRadio').click(function(){
$(this).toggleClass("active");
$('.toggleButtonRadio').not(this).removeClass("active");
});
JSFiddle Demo
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!
here is the fiddle page:
http://jsfiddle.net/hgcTb/10/
in the form there is a radio button with id = "extra"
i was hoping to do this:
when user clicks that radio button all other inputs are disabled, the only inputs that would be enabled is the radio buttons and the submit/reset buttons, and when user click reset the form should reset to the original form, maybe using javascript?
please give some pointers or samples
EDIT: ive added a function to disable each element but it is giving me errors.
Yes, use javascript to do so.
Add an onclick event to your radio button that disables the other HTML elements. For example:
Here's your radio button:
<input type="radio" name="choice" value="consume" onclick="disableItems(this)" />
Here's your script:
function disableItems(obj) {
var el = document.getElementById('<your HTML element's ID>');
el.disabled = true;
// do this for other HTML elements in your form
}
Regarding Reset, you can attach a similar onclick handler for the RESET button, that enables the controls back (using el.disabled=false).
These are just snippets to get you started, and give you an idea of how to proceed (no spoon-feeding for the exact solution). There may be more code involved based on your form's logic.