I have a couple of checkbox that I would like to make only one of them clickable. I have tried different solutions on stack overflow. I also changes changed the input type to radio and I have used the following code but still its not working:
$(document).ready(function () {
$('input[type=radio]').change(function() {
// When any radio button on the page is selected,
// then deselect all other radio buttons.
$('input[type=radio]:checked').not(this).prop('checked', false);
});
});
My Code is as follows:
<div id="options-content5" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox15" type="checkbox" name="last24">
<label for="checkbox15">
Last 24 Hours
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox16" type="checkbox" name="last3Days">
<label for="checkbox16">
Last 3 days
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox17" type="checkbox" name="last7Days">
<label for="checkbox17">
Last 7 days
</label>
</div>
<br>
</div>
If you want to make only one of a set of checkboxes clickable, use radio buttons with the same name. This will be much better for usability and accessibility. Here's an article from the Nielsen Norman Group about how to choose between checkboxes and radio buttons and why it matters. https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
I'd recommend using the values in place of your names to differentiate.
<div id="options-content5" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox15" type="radio" name="lastTimeFrame" value="last24">
<label for="checkbox15">Last 24 Hours</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox16" type="radio" name="lastTimeFrame" value="last3Days">
<label for="checkbox16">Last 3 days</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox17" type="radio" name="lastTimeFrame" value="last7Days">
<label for="checkbox17">Last 7 days</label>
</div>
<br>
</div>
Related
I'm new at coding and I must be making a simple mistake that I can't figure out.
My angular aplications has two Modals, the first is a form to add and the second is the edit.
When I'm using the first modal the radio button works, but when I try the second the radio buttons wont work. As if they were disabled.
One thing that I've noticed is that when I use the tab button on my keyboard the radio buttons are selectable through the keyboard.
I've also noticed that if I change the code of the modal that has the radio button that was not working before the code that was working this inverts the issue.
The code that is "rendered" first works.
<!-- fist RadioButton -->
<div class="md-form">
<div class="d-flex justify-content-around">
<p>Tipo da Instituição: </p>
<div class="custom-control custom-radio custom-control-inline">
<input formControlName="tipoedit" type="radio" class="custom-control-input" id="publica" name="tipoedit"
value="Publica">
<label class="custom-control-label" for="publica">Publica</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input formControlName="tipoedit" type="radio" class="custom-control-input" id="privado" name="tipoedit"
value="Privado">
<label class="custom-control-label" for="publica">Privado</label>
</div>
</div>
<div *ngIf="submitted && fedit.type.errors" class="invalidFeedback">
<div *ngIf="fedit.type.errors.required">Tipo é obrigatorio</div>
</div>
</div>
<!-- Second RadioButton -->
<div class="md-form">
<div class="d-flex justify-content-around">
<p>Tipo da Instituição: </p>
<div class="custom-control custom-radio custom-control-inline">
<input formControlName="tipo" type="radio" class="custom-control-input" id="publica" name="tipo"
value="Publica">
<label class="custom-control-label" for="publica">Publica</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input formControlName="tipo" type="radio" class="custom-control-input" id="privado" name="tipo"
value="Privado">
<label class="custom-control-label" for="privado">Privado</label>
</div>
</div>
<div *ngIf="submitted && fadd.tipo.errors" class="invalidFeedback">
<div *ngIf="fadd.tipo.errors.required">Tipo é obrigatorio</div>
</div>
</div>
The problem seems to be your for attributes on the labels and the fact that you have multiple elements with the same ids. I highly recommend never having two HTML elements with similar ids.
Try changing the ids of your second radio modal (something like privadoEdit/publicaEdit )and change the for attributes accordingly.
Also, your first modal has publica in both your label's for attributes, change the second one to privado
Hope this hleps
With Twitter Bootstrap 3.3.7, I am trying to line up multiple questions that have inline radio button answers and have the radio buttons for all questions line up to be displayed nicer for end users.
If this is on a Extra small device, I want the radio buttons to be on the next line.
The trouble I am having is that applying col-sm-6 (or any column size) seems to not work as I expect. The help-block doesn't fully go to the next line, it's stuck under the radio buttons.
I'm looking to be able to use proper Twitter Bootstrap form syntax. Is this possible with the form syntax, or does this require doing it with their own rows/cols?
An example of a question: JSFiddle https://jsfiddle.net/y8j5f0of/
<div class="row">
<div class="form-group">
<label class="col-sm-6">This is an example question</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="answer1" value="Yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="answer1" value="No"> No
</label>
</div>
<span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span>
</div>
</div>
Answers are lined up, but the output isn't flowing properly.
If I remove the col-sm-6, everything flows as expected but the answers aren't lined up. Also, this doesn't allow the radio buttons to go to their own line for Extra small device.
JSFiddle https://jsfiddle.net/nz36k74o/1/
<div class="row">
<div class="form-group">
<label>This is an example question 1 that is longer than question 2</label>
<label class="radio-inline">
<input type="radio" name="answer1" value="Yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="answer1" value="No"> No
</label>
<span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span>
</div>
</div>
Output
The help block should really be in a new row. If it is supposed to be underneath the other content, then its not part of the row. That's the basis of the Bootstrap grid system. A basic question block should look like this:
<div class="form-group">
<div class="row">
<label class="col-sm-6">This is an example question 1 that is longer than question 2</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="answer1" value="Yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="answer1" value="No"> No
</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span>
</div>
</div>
</div>
Check out the fiddle (sorry onlyhad time to do one)
Here is one solution to align the question correctly. It adds in some extra html tags but I believe it solves your issue.
This is the updated fiddle.
https://jsfiddle.net/nz36k74o/3/
<div class="form-group">
<label class="col-sm-6">This is an example question</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="answer1" value="Yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="answer1" value="No"> No
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<span class="help-block">This is an example help block.</span>
</div>
</div>
I would like to use these funky radio buttons though the radio buttons have an id=radio1, id=radio2, id=radio3 etc
I would like all of them to have id-radio1 so it writes the result to radio1 in the database:
Here is how I have normal radio buttons working in the past using the same id and they toggle between one another:
<div class="form-group col-md-12">
<label class="control-label form-check-inline">Gender</label>*
<div class="form-group">
<input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label>
<input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label>
</div>
</div>
$Gender=$_POST["Gender"];
INSERT INTO [dbo].[SubmissionsTBL]
[Gender]
VALUES
(,'".trimText($Gender)."')
Though, with the funky radio buttons chaning from this:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
to this doesn't work - it doesn't allow me to toggle radio buttons:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1"/>
<label for="radio2">Female</label>
</div>
</div>
What is stopping the toggle?
Thank you!
TL;DR: Due to the id and name attribute having the same value in your first example, I believe you may be confusing the two. With the database communication code you put up, it's grabbing the name="Gender" and not the id="Gender".
Additional information about id and class though you might find useful as an internet programmer:
The id attribute can only apply to one element per HTML document. I would suggest using the class attribute instead. The main difference between and id and a class is that a class can be applied to multiple elements.
Here is a working solution to the code you provided:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" class="radio_grp1"/>
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2" class="radio_grp1"/>
<label for="radio2">Female</label>
</div>
</div>
I used the class .radio_grp1 as the name so that you know that you're referring to a group of radio buttons rather than just one.
Moreover, if you're using a library like bootstrap, it's very common that an element will already have an assigned class. To solve this issue, you can assign a single element multiple classes by adding a space in the string following the class attribute like so:
<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/>
Hope this was useful!
Your code should be changed to something like this. the radio button's name is what is submitted to the back end, and the id is used for front-end things like label association.
id's should always be unique.
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
If by toggling, you mean the normal behavior of radio buttons, then that happens whenever all the radio buttons in the group have the same name.
I swear I have done checkboxes a million times but these are giving me trouble. When I check either one, the other one also gets the checked attribute. My guess? Angular is the culprit, but I still need to find a solution because I can't strip Angular out. I'd give you a JFiddle, but like I said, Angular injections and modules, etc...You understand. But I will give you the related code:
This is the HTML:
<div class="form-group col-xs-12 col-sm-12 col-md-3" ng-class="{ 'has-error': quoteform.inputProject.$invalid && submitted }">
<label for="inputProject">Project Type <span class="required">*</span></label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="checkbox1" value="checkbox1"> Lawn Care
</label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="checkbox2" value="checkbox2"> Home Improvement
</label>
</div>
After checking the broweser's dev tools I noticed this
<input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="project" value="" class="ng-pristine ng-untouched ng-valid" tabindex="0" aria-checked="true" aria-invalid="false">
The aria-checked changes to true on all checkboxes when I click on one. Why? and how do I fix this?
Thanks
Because you have the same model set to each checkbox.
You need to have a different model for each, somewhat like this: take note of the ng-model
<div class="form-group col-xs-12 col-sm-12 col-md-3" ng-class="{ 'has-error': quoteform.inputProject.$invalid && submitted }">
<label for="inputProject">Project Type <span class="required">*</span></label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject1" type="checkbox" name="inputProject" id="checkbox1" value="checkbox1"> Lawn Care
</label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject2" type="checkbox" name="inputProject" id="checkbox2" value="checkbox2"> Home Improvement
</label>
</div>
I have two radio buttons, No and Yes. By default no is checked. I have css that styles the checked elements. But by default the styles only work if you physically check it. I want to style it right of page load without have to select it. Currently I am stumped. Thanks for your help
HTML
<div class="split">
<input id="contact-no" type="radio" name="contact" value="No" checked="checked">
<label for="contact-no">No</label>
</div>
<div class="split">
<input id="contact-yes" type="radio" name="contact" value="Yes">
<label for="contact-yes">Yes</label>
</div>
CSS
.am-form input[type="radio"] + label:hover, .am-form input[type="radio"]:checked + label{background: rgb(239,58,65);}
What it looks like on page load:
What It should Look like on page load and after you select it:
I had multiple hidden section with the same name/id, so I juts had to customize each one.
<div class="split">
<input id="ns-contact-no" type="radio" name="ns_contact" value="No" checked="checked">
<label for="ns-contact-no">No</label>
</div>
<div class="split">
<input id="fs-contact-yes" type="radio" name="ns_contact" value="Yes">
<label for="fs-contact-yes">Yes</label>
</div>
further down and hidden:
<div class="split">
<input id="bs-contact-no" type="radio" name="bs_contact" value="No" checked="checked">
<label for="bs-contact-no">No</label>
</div>
<div class="split">
<input id="bs-contact-yes" type="radio" name="bs_contact" value="Yes">
<label for="bs-contact-yes">Yes</label>
</div>