the question is too difficult for me:
I have two button:
#Inca
and
#Maya
If #Inca checked, i want disabled #Inca and to remove (if there is) the check on button #Maya .
But than, if i check #Maya, i want disabled #Maya, abled #Inca but to remove the check on button #Inca (but this doesn't work).
In this way if i want, i can check button #Inca and the "loop" start again.
This is the code:
$('#incas, #maya').change(function () {
if ($('#incas').attr("checked")) {
$('#incas').attr('disabled', true);
$('#maya').attr('disabled', false);
}
if ($('#maya').attr("checked")){
$('#maya').attr('disabled', true);
$('#incas').attr('disabled', false);
$('#incas').attr('checked', false);
}
});
and this is jsfiddle:
http://jsfiddle.net/es8p74w4/
You should not use checkboxes in this case. Use radio buttons and you won't need any JS:
<div id="noneAbove">
<p>
<input id="inca" name="foo" type="radio" />
inca </p>
<p>
<input id="support" name="foo" type="radio" />Blah Blah</p>
</div>
Use class to enable and disable buttons: less code, more efficient and clean.
using single style class for enabled and disabled button
Related
I am writing an Angular component which uses radio button (Need to use default radio buttons due to project constraints).
I need to print the value of the radio button (whether it is checked or unchecked). Like following:
<input type="radio" (change)="onUpdate($event)">
<p>{{isActive}}</p>
In the component something like this:
onUpdate(event) {
this.isActive = event.target.checked;
}
But this doesn't work as the change event is not triggered when the radio button is unchecked. Is there any way to intercept the event when the radio button is unchecked?
Please help. I am stuck. Dummy app link here
Edit: What I am trying to do
I am trying to write a custom radio button so that I can styles it on my own. I cannot write a radio-group component. Hence I need a wrapper component around the default one. Something like Stackblitz-link. I need the unchecked event because I have some custom element which has to be notified about this. Any way to achieve this ?
Use a checkbox, style it like a radio button. Seems to be the easiest solution and of course use ng-model instead of onChange.
You could replace (change) with (click), because every click on the radio button is a change anyway.
<input type="radio" (click)="onUpdate($event)">
<p>{{isActive}}</p>
The above is a solution, but I'd use this:
<input type="radio" [(ngModel)]="isActive">
<p>{{isActive}}</p>
It binds your radio button to your isActive property, so it changes dynamically with clicking.
So using two radio buttons got this working for me, let me know if you can model this for your application.
<input type="radio" name="button" [value]="checked" (change)="checked=!checked">
<input type="radio" name="button" [value]="!checked" (change)="checked=!checked">
<p>{{checked}}</p>
I am setting checked to false by default in my component.
Can you please try to adjust this logic with your code? Checking some new radio will uncheck other and we can keep track of this behavior.
<p>
<input type="radio" name="r1" value="one" [(ngModel)]="isActive">
<input type="radio" name="r2" value="two" [(ngModel)]="isActive">
<input type="radio" name="r3" value="three" [(ngModel)]="isActive">
</p>
<p>{{isActive}}</p>
Stackblitz link
I have a checkout page with two radio buttons one for 'Register Account' and 'Guest Account' checkout methods.
I want a single checkbox that when it is checked, it checks the Register Account radio button and when it isn't checked it checks the Guest Account checkout radio button.
Here is my code so far:
http://jsfiddle.net/hQbpZ/160/
HTML:
Remember Me for Future Purposes :<input type="checkbox" id="checkbox1"/> <br/><br/>
Register Account :<input type="radio" id="radio1" name="radio"/><br>
Guest Checkout :<input type="radio" id="radio2" name="radio"/><br>
JS:
jQuery('#checkbox1').click(function(){
jQuery('#radio1').attr('checked', true);
});
jQuery('#checkbox1').click(function(){
jQuery('#radio2').attr('checked', false);
});
I got part of the functionality down but I don't know how to uncheck a radio button when a checkbox is unchecked.
You can do it like this:
jQuery('#checkbox1').click(function () {
jQuery('#radio1').prop('checked', $(this).is(':checked'));
jQuery('#radio2').prop('checked', !$(this).is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Remember Me for Future Purposes :
<input type="checkbox" id="checkbox1" />
<br/>
<br/>Register Account :
<input type="radio" id="radio1" name="radio" />
<br>Guest Checkout :
<input type="radio" id="radio2" name="radio" />
<br>
Just add a toggle variable and link the checked attribute to it
http://jsfiddle.net/hQbpZ/163/
var registered = false;
jQuery('#checkbox1').click(function(){
registered = !registered
jQuery('#radio1').attr('checked', registered);
jQuery('#radio2').attr('checked', !registered);
});
It is impossible to manually uncheck radio buttons, simply because they're not meant to be used that way (read more). The only way to have a radio button uncheck is by creating multiple radio buttons sharing the same name tag, meaning your HTML is already correct.
Your JavaScript does need some changes. It is not necessary to bind a function twice to the same event, so you could reduce it to one binding. Inside that binding you check whether the clicked checkbox is now on or off, and depending on that you check one of the two radio buttons, like so:
$('#checkbox1').click(function() {
if($('#checkbox1').prop('checked') === true) {
$('#radio1').attr('checked', true);
} else {
$('#radio2').attr('checked', false);
}
});
Proceed </button>
<input type="checkbox" name="checkbox3" value="yes">
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
I have a checkbox and a button which will take me to next page. But, before I press the button the check box has to be ticked. If not, a label has to be displayed below the check box saying "accept to rules first". Help? Also, it would be great if i can highlight the checkbox to red if i click proceed without checking the checkbox. Can use javascript/jquery.
Try this it works
<form action="page.html">
<input type="checkbox" name="checkbox3" value="yes" required>
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
<input type="submit" name ="submit"/>
</form>
To get you started:
<input id="checkboxAgree" type="checkbox" name="checkbox3" value="yes">
function checkAgree()
{
if (document.getElementbyId("checkboxAgree").getAttribute("checked") )//checkbox is checked
{
location.href = "page.html"; //load the next page.
}
else
{
Alert("You need to check the box before you can continue");
}
}
document.getElementById("proceed-button").addEventListener("click", checkAgree ,false);
addEventListener add an onclick event to the button. When clicked this executes the function checkAgree. When the checkbox has the attribute checked it is checked and the ifwill render true. location.href will load page.html.
Please delete the a that surrounds your button.
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
I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.
How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.
Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>
You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>
jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.