So I got this bit of code where if I click a radio button I want these other radio buttons to be unclicked if they are cliked and also to be disabled.
So far they get disabled but however they do not get unclicked?
if (document.getElementById("None").checked) {
document.getElementById("HundredsAndThousands").clicked = false;
document.getElementById("ChocolateSprinkles").clicked = false;
document.getElementById("SilverBalls").clicked = false;
document.getElementById("Coconut").clicked = false;
document.getElementById("HundredsAndThousands").disabled = true;
document.getElementById("ChocolateSprinkles").disabled = true;
document.getElementById("SilverBalls").disabled = true;
document.getElementById("Coconut").disabled = true;
}
The property you need to change is called checked, not clicked:
document.getElementById("HundredsAndThousands").checked = false;
document.getElementById("ChocolateSprinkles").checked = false;
document.getElementById("SilverBalls").checked = false;
document.getElementById("Coconut").checked = false;
This can be done so much better, if you use a jQuery library. You can use .val() or .attr() to get the value of the radio button.
var str = $("#none").attr('checked');
var str = $("input:radio[name=radioname]:checked").val();
And .attr('checked', true); to change a radio button from checked (to unchecked). To change this on a group
$("input:radio[name=mygroup]").attr('checked',true);
Related
I have created radio button is created on client side and when I click it, it should show my existing div i.e. ifPrint
Please have a look at code I am trying:
radio button creation:
var optiondiv = document.getElementById('option-div');
document.getElementById('create').onclick = function () {
newopt = document.getElementById('new-option').value;
if(newopt){
var input = document.createElement('input'),
label = document.createElement('label');
input.type = "radio";
input.setAttribute("value", newopt);
input.setAttribute("checked", true);
input.setAttribute("name", "radio-name");
label.appendChild(input);
label.innerHTML += newopt+'<br>';
optiondiv.appendChild(label);
document.getElementById('new-option').value = '';
$.post(
"equipments1.php",
{
"newopt": newopt
},
function(data) {
if(data.success){
alert('Successful Added To dB');
document.getElementById('newopt').checked = false;
// if (document.getElementById('newopt').checked) {
//document.getElementById('ifPrint').style.display = 'block';
//$(#ifPrint).show();
//$(#ifPrint).show();
}else{
alert('Not Add To DB');
}
});
}else{
alert('Please Enter Radio Button Value.');
return false;
}
};
New function for showing Div ifPrint:
$('input[type=radio][name=newopt]').change(function() {
$(#ifPrint).show();
});
Please guide if possible
You need to use click instead of change, and also you missing quotes in your code, and it's better to use "on" than "click" function if element is created after dinamicaly
$('body').on('click','input[type=radio][name=newopt]',function () {
$('#ifPrint').show();
});
I can't uncheck a checkbox after I checked it (all via JS/Jquery).
Code:
//Works perfect
function showL(labelObj)
{
var cb = $(labelObj).prev()[0];
$(cb).prop('checked', true);
}
//Does NOT work
function hideL(labelObj)
{
var cb = $(labelObj).next()[0];
//$(cb).attr('checked', false);
$(cb).prop('checked', false);
}
update
It's the same object in both functions:
You can just do.
$('input[type="checkbox"]').on('click', function{
var propState = $(this).prop('checked'); // grab the checkbox checked state.
propState === true ? propState = false : propState = true; // ternary operation. If box is checked uncheck it. if it is not checked check it.
}
It will work on all checkboxes.
function bookingchanneldisable(stopSale){
if (stopSale == "N") {
document.getElementById("applicableBookingChannel").readOnly = false;
document.getElementById("applicableBookingChannelReservation").readOnly = false;
}else{
document.getElementById("applicableBookingChannel").checked = true ;
document.getElementById("applicableBookingChannelReservation").checked = false ;
document.getElementById("applicableBookingChannel").readOnly = true;
document.getElementById("applicableBookingChannelReservation").readOnly = true;
}
}
this function working fine in firefox (ubuntu) , but it is not working in firefox (windows). please can you help me
readonly prevents users from changing the field value. So it works with inputs in which you can change the value (like text boxes), but it doesn't work on inputs in which you do not change the value but the field state (like checkboxes).
To solve the problem, you should use disabled with checkboxes instead. Like this:
function bookingchanneldisable(stopSale){
if (stopSale == "N") {
document.getElementById("applicableBookingChannel").disabled = false;
document.getElementById("applicableBookingChannelReservation").disabled = false;
}else{
document.getElementById("applicableBookingChannel").checked = true ;
document.getElementById("applicableBookingChannelReservation").checked = false ;
document.getElementById("applicableBookingChannel").disabled = true;
document.getElementById("applicableBookingChannelReservation").disabled = true;
}
}
See it working on this JSFiddle: http://jsfiddle.net/fg1xLr1h/
I am working on a JSP page which is having multiple radio buttons with ids ans1, ans2, ans3... etc.. No of radio buttons varies depending upon on the response in previous page. User should select answer for all the radio buttons. i.e. user must select response for all the radio buttons ans1, ans2, ans3 ... etc. I have written a Javascript code for submit button click event as below for validation and to make sure user has responded to all the answers:
function beforeSubmit(){
var obj = document.quizcreen;
var qCount = obj.totQuesHidden.value;
for (var i=1; i<=qCount; i++){
if(document.getElementById("ans"+i).checked){
// checked
}else{
alert("Please select ateleast one option"); // unchecked
return false;
}
}
obj.submit();
return true;
}
For some reason above code is not working. The form should not be submitted if all the radio buttons are not selected. Please help, I know it's very simple and common issue, but I am unable to figure it out. Thanks in advance.
Also following is the form action:
<form name="quizcreen" id="quizcreen" method="post" action="QuizResult.jsp" onsubmit = "return beforeSubmit();">
You have a return true statement in your loop. So when the first radiobutton is checked, it will not check the other ones.
function beforeSubmit(){
var obj = document.quizcreen;
var qCount = obj.totQuesHidden.value;
var allChecked = true;
for (var i=1; i<=qCount; i++){
if(! document.getElementById("ans"+i).checked){
allChecked = false;
}
}
if(! allChecked){
alert("Please select ateleast one option"); // unchecked
return false
}
obj.submit();
return true;
}
Ok I found out a better way to handle my scenario, So I am sharing my code for your info:
function beforeSubmit() {
var obj = document.quizcreen;
var allChecked = true;
$("input:radio").each(function() {
var name = $(this).attr("name");
if ($("input:radio[name=" + name + "]:checked").length == 0) {
allChecked = false;
}
});
if (!allChecked) {
alert("Please answer all the questions."); // unchecked
return false;
}
obj.submit();
return true;
}
your problem is at least one to be checked.
do this stuff
function isRadioChecked() {
return ($('input[type=radio]:checked').size() > 0);
}
I have the following JavaScript to disable a dropdownlist in a ASP.NET page, which gets called when I click a button.
function disableDropDown(DropDownID)
{
document.getElementById(DropDownID).disabled = true;
return false;
}
I wanted to use the same button to toggle between enable and disable for that dropdownlist. How do I do this?
You just have to invert the boolean disabled attribute:
function toggleDisableDropDown(dropDownID) {
var element = document.getElementById(dropDownID); // get the DOM element
if (element) { // element found
element.disabled = !element.disabled; // invert the boolean attribute
}
return false; // prevent default action
}
function toggleDisableDropDown(DropDownID)
{
var sel = document.getElementById(DropDownID);
sel.disabled = !sel.disabled;
return false;
}