How to disable radio button on both sides on clicking of radio button in center using Closest?
<div class="pure-u-1 pure-u-md-1-5">
<span style="white-space: nowrap;">
<span style="display: inline-block;">
<label for="COMA">
<p>
<input type="radio" value="Yes" name="COM" id="COM0">
Yes
</p>
</label>
</span>
<span style="display: inline-block;">
<label for="COMA">
<p>
<input type="radio" checked="checked" value="No" name="COM" id="COM1">
No
</p>
</label>
</span>
<span style="display: inline-block;">
<label for="COMA">
<p>
<input type="radio" value="NA" name="COM" id="COM2">
NA
</p>
</label>
</span>
</span>
</div>
On Click of No, i want to disable YES and NA radio button, but not by using any looping/iterations or disabling on static Name or ID,
but want Jquery methods closest or siblings to do the same.
How is this possible in JQuery using it?
Try this
DEMO HERE
$('input[type=radio]').on('click',function(){
$("input:radio").attr('disabled',true);
$(this).removeAttr('disabled');
});
or just with a single line
DEMO
$('input[type=radio]').on('click',function(){
$("input:radio").not($(this)).attr('disabled',true);
});
You can do it like this, basically you take the closest <div> and then find all <input> of type radio but the "No" radio and disable them.
$("#COM1").on("click", function() {
var $no = $(this);
$no.closest("div").find("input:radio").not($no).attr("disabled", true);
});
See this http://jsfiddle.net/4459rqtp/
Related
I have 2 radio buttons, When I click on the option A, a particular div has to be shown, and when click on the option B, 1st div should be hidden and 2nd div should be shown. Below is the code.
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-A" value="true" data-bind="click: test">
<label for="test-radio-Option-A">Text Message</label>
</div>
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-B" value="false">
<label for="test-radio-Option-B">Text Message</label>
</div>
<div style="display: none" data-bind="visible: showDiv">
test Div
</div>
Following is the script I tried:(coffee script)
#showPhone = ko.observable false
test: =>
#showPhone true
using this if I click on the 1st radio button, I was able to see the div, but I don't know if its the right way Can someone please guide me through this?
Thanks.
You'll be needing the two following bindings:
checked: to put on your radio-buttons
visible: to put on your divs you want to display
your html will look like this:
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-A" value="true" data-bind="checked: optionA">
<label for="test-radio-Option-A">Text Message</label>
</div>
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-B" value="false" data-bind="checked: optionB">
<label for="test-radio-Option-B">Text Message</label>
</div>
<div data-bind="visible: optionA">
test Div A
</div>
<div data-bind="visible: optionB">
test Div B
</div>
Your viewModel will need 2 boolean observables optionA and optionB for the view to bind to in this manner
I try to toogle div class from a span click i tried
$(this).closest(".div").find(".list-type-demandes").toggle();
but it doesn't work.
if i use :
$(".list-type-demandes").toggle();
it's works but it's showing me the two div and i need to display the div from "this" span
here HTML :
<label style="color: #1c5081">
<span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b>
</span> Organisation, support et services
</label>
<div class="list-type-demandes" style="padding-left: ; display: none">
<label style="display: inline">
<input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="54" id="appel_projet_type_demande_list_54"> Architecture d'entreprise
</label>
</div>
<label style="color: #1c5081">
<span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b></span> Applications
</label>
<div class="list-type-demandes" style="padding-left: ; display: none">
<label style="display: inline">
<input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="52" id="appel_projet_type_demande_list_52"> Système d'information activités recherche
</label>
</div>
here the script :
function toogleListTypeDemande(element) {
$(this).closest(".div").find(".list-type-demandes").toggle();
}
You need to modify toogleListTypeDemande(element) just a little.
Javascript offers the attribute nextElementSibling to get the next html element. Unfortunately there is no next sibling to your span element. So we need to travel one node back to get it's parent element.parentNode - which is the label - and from there the next sibling is the div.
function toogleListTypeDemande(element) {
$(element.parentNode.nextElementSibling).toggle();
}
Use ID unique and check below code,
You can use directly click also
$('.toogle-toobar-open').click(function(){
$(this).closest("label").next(".list-type-demandes").toggle();
});
label{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
function toogleListTypeDemande(element) {
$(element).closest("label").next(".list-type-demandes").toggle();
}
</script>
<label style="color: #1c5081">
<span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b>Organisation, support et services
</span>
</label>
<div class="list-type-demandes" style="padding-left: ; display: none">
<label style="display: inline">
<input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="54" id="appel_projet_type_demande_list_54"> Architecture d'entreprise
</label>
</div>
<label style="color: #1c5081">
<span id="toolbar-open2" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b> Applications</span>
</label>
<div class="list-type-demandes" style="padding-left: ; display: none">
<label style="display: inline">
<input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="52" id="appel_projet_type_demande_list_52"> Système d'information activités recherche
</label>
</div>
I want to change the radio Button text after selecting that Radio button like,
If the first radio button is selected, the text should change from Checkout as a guest to Checkout as a guest --> Please Press continue.
If they select the second radio button the text should change from Register an account to Register an account --> Please Press Continue
<div class="PL40" style="line-height: 2;">
<dl>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_guest">
<span class="">
<input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" onclick="$('#BillingDetailsLabel').html('Billing Details');">
</span>
</div>
Checkout as a guest
</label>
</dd>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_register">
<span class="checked">
<input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" onclick="$('#BillingDetailsLabel').html('Billing & Account Details');">
</span>
</div>
Register an account
</label>
</dd>
<dd class="Submit mt10 mb10">
<input type="submit" id="CreateAccountButton" value="Continue" class="btn">
<span class="LoadingIndicator" style="display: none">
<img src="https://cdn6.bigcommerce.com/r-b99d97b0aae9cde0306565d8de6f047a25afdd8a/themes/Artify/images/Loading.gif" alt="">
</span>
</dd>
</dl>
</div>
Javascript
$("input[name='checkout_type']").click(function() {
$('#uniform-checkout_type_guest').text('Checkout as Guest');
$( "#uniform-checkout_type_guest" ).append( "<strong>---Hello</strong>" )
});
Here are three changes you can make so your jQuery is more consise:
Put label text in a spanelement
Give the span elements a common class - radio-label
Add a data attribute to your radio buttons - data-default-text
//wait for DOM ready event
$(function() {
//attach a change event listener to the radio buttons -- could give them a common class
$(':radio[name=checkout_type]').on('change', function() {
//reset labels
$('.radio-label').text( function() {
return $(this).closest('label').find(':radio').data('default-text');
});
//set new label per checked radio
$(this).closest('label').children('.radio-label')
.text( $(this).data('default-text') + ' --> Please Press Continue' );
})
//trigger change in case a radio is selected when page loads
.change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="PL40" style="line-height: 2;">
<dl>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_guest">
<span class="">
<input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" onclick="$('#BillingDetailsLabel').html('Billing Details');" data-default-text="Checkout as a guest">
</span>
</div>
<span class="radio-label">Checkout as a guest</span>
</label>
</dd>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_register">
<span class="checked">
<input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" onclick="$('#BillingDetailsLabel').html('Billing & Account Details');" data-default-text="Register an account">
</span>
</div>
<span class="radio-label">Register an account</span>
</label>
</dd>
<dd class="Submit mt10 mb10">
<input type="submit" id="CreateAccountButton" value="Continue" class="btn">
<span class="LoadingIndicator" style="display: none">
<img src="https://cdn6.bigcommerce.com/r-b99d97b0aae9cde0306565d8de6f047a25afdd8a/themes/Artify/images/Loading.gif" alt="">
</span>
</dd>
</dl>
</div>
NOTE: This answer assumes you are using jQuery Mobile as you have that tag on your question.
Set up plain radio buttons and let jQM enhance them:
<dd>
<label>
<input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" />
Checkout as a guest
</label>
</dd>
<dd>
<label>
<input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" />
Register an account
</label>
</dd>
Then listen for the change event:
$("input[name='checkout_type']").on("change", function() {
$("input[name='checkout_type']").each(function(){
var text = '';
if ($(this).val() == "guest"){
text = "Checkout as a guest";
} else {
text = "Register an account";
}
if ($(this).is(":checked")) {
text += " --> Please Press continue";
}
$(this).closest(".ui-radio").find("label.ui-btn").text(text);
});
});
Loop through each radio button, see if it is checked and then set the text accordingly.
DEMO
UPDATE:
Using PeterKA's data attribute for the default text makes the code even nicer:
$("input[name='checkout_type']").on("change", function() {
$("input[name='checkout_type']").each(function(){
var text = $(this).data('default-text');
if ($(this).is(":checked")) {
text += " --> Please Press continue";
}
$(this).closest(".ui-radio").find("label.ui-btn").text(text);
});
}).change();
Updated DEMO
I am trying to change the content by selecting the different radio button. My codes seem not working. Any problem with it? Here is the FIDDLE:
HTML
<div id="category-table" style="display: block;">
<div class="btn-group" data-toggle="buttons" style="float:right;">
<label class="btn btn-show-category active">
<input type="radio" name="options" id="option1" autocomplete="off" value="A-categories" checked=""> A Categories
</label>
<label class="btn btn-show-category">
<input type="radio" name="options" id="option2" autocomplete="off" value="B-categories"> B Categories
</label>
</div>
<br><br>
<div class="all-categories">
<div class="content-header">Category A</span></div>
</div>
<div class="used-categories" style="display:none;">
<div class="content-header">Category B</span></div>
</div>
</div>
JS
$(document).ready(function () {
$('input[type="radio"]').click(function () {
if ($(this).attr("value") == "A-categories") {
$(".used-categories").hide();
$(".all-categories").show();
}
if ($(this).attr("value") == "B-categories") {
$(".all-categories").hide();
$(".used-categories").show();
}
});
});
Any Suggestion?
Just check fiddle. It looks like you did not include jquery js file.
make the click event to change event in radio button.
I have update the fiddle check it out
Here is the updated fiddle
What I am trying to accomplish:
I am trying to make a form where when a user selects yes a div slides down, and when the user selects no the div slides up (thus making what is in that div invisible). and I want this to have a nice display (to look almost like a button in a group that can toggle and only one is able to toggle at a time such as a radio button) it should look more or less like this:
http://getbootstrap.com/components/#btn-groups
What my problem is:
When I toggle this button it will not fire a function.
Where it gets weird
I notice that when I don't set the data-toggle="buttons" I get radio buttons that have the little circle and fire the function, but when I set data-toggle="buttons" it will not fire the function.
Here is my form:
<form id="questionnaire">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="yes" name="vomit" />yes
</label>
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="no" name="vomit" />no
</label>
</div>
<div class="expand">
<h4>How many times?</h4>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
and the function I am trying to fire:
$('#questionnaire input[name=vomit]').on('change', function () {
var $p = $('.expand');
if ($('input[name=vomit]:checked').val() == "yes") {
//alert("hello");
$p.slideDown();
}
else {
//alert("nope");
$p.slideUp();
}
});
Can anyone please help me get the radio button to look like the bootstrap (and once selected they stay the color) one but that functions?
Thanks
I ended up using this switch here :
http://proto.io/freebies/onoff/
here is the html:
<h4>Did you Vomit?</h4>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="vomit" />
<label class="onoffswitch-label" for="vomit">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="expand">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
here is the jquery
$("#vomit").change(function () {
var $p = $('.expand');
if ($(this).is(':checked')) {//this is true if the switch is on
$(this).val("Yes");
$p.slideDown();
}
else {
$(this).val("No");
$("#numVomit").val(0);
$p.slideUp();
}
});
It seems like there was truly a conflict with jquery, bootstrap and jquery-ui. I will have to end up doing some code cleanup to see exactly where it is conflicting.