I made my checkmark input have a toggle function to show/hide an input box, but what I am trying to do is get two different options of text to fade in with the toggle choice ( and obviously since the checkmark is true on page load, for the appropriate text to show on load too).
When the checkbox input is true, I want it to say,Enabled.
When the checkbox input is false, I want it to say, Turned Off.
How can I do this?
// Checkbox checked and input disbaled when page loads
$('#TYemailCheck').prop('checked', true);
// Enable-Disable text input when checkbox is checked or unchecked
function TYenable(trigger, target) {
$(trigger).on('change', function () {
$(target).toggle();
});
}
TYenable("#TYemailCheck", "#TYemailEnabled");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="TYemailCheck">
<div id="TYemailEnabled">
<input type="text">
</div>
You should include two divs that contain your texts and toggle between them according to checkbox change.
// Checkbox checked and input disbaled when page loads
$('#TYemailCheck').prop('checked', true);
$('#turnedOff').hide();
// Enable-Disable text input when checkbox is checked or unchecked
function TYenable(trigger, target) {
$(trigger).on('change', function () {
$(target).toggle();
$('#enabled, #turnedOff').fadeToggle(500);
});
}
TYenable("#TYemailCheck", "#TYemailEnabled");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="TYemailCheck"><span id="enabled">Enabled</span><span id="turnedOff">Turned Off</span>
<div id="TYemailEnabled">
<input type="text">
</div>
Related
In the view, I have these two radio buttons:
#Html.RadioButtonFor(c => c.CampaignType, "Exclusive")<label>Exclusive</label>
#Html.RadioButtonFor(c => c.CampaignType, "Shared")<label>Shared</label>
The value for Model.CampaignType is set in the controller before the page loads. All of this works fine. If Exclusive is what's saved in the DB, then we get this rendered in the HTML:
<input checked="checked" id="CampaignType" name="CampaignType" type="radio" value="Exclusive"><label>Exclusive</label>
<input id="CampaignType" name="CampaignType" type="radio" value="Shared"><label>Shared</label>
So far, all's well.
But, inside an onclick() event for a button, if I do this:
var values =
{
"CampaignType": $('#CampaignType').val()
}
alert(values.CampaignType);
The alert always comes up as `Exclusive', even if I have changed the selection to 'Shared'.
What do I need to do so that values.CampaignType reflects the what is selected on the page, and not what was set when the page was loaded?
So you can do start with these:
Remove the invalid ids - multiple ids are invalid in CSS. For getting the value of the checked radio button you can use:
$('input[name=CampaignType]:checked').val()
or
$('input[type=radio]:checked').val()
For the label to work you have to link it with the corresponding radio button using the for attribute.
See demo below:
function submit() {
var values = {
"CampaignType": $('input[name=CampaignType]:checked').val()
}
console.log(values.CampaignType);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input checked="checked" id="CampaignType1" name="CampaignType" type="radio" value="Exclusive">
<label for="CampaignType1">Exclusive</label>
<input id="CampaignType2" name="CampaignType" type="radio" value="Shared">
<label for="CampaignType2">Shared</label>
<br/>
<button onclick="submit()">click here</button>
All the best!
Below is my code, I am trying to hide and show dynamic elements. The problem I am having is, I only want my hidden div to only show one at a time if only I check "Other". However, the code below will show the hidden div for all number of #dynamicRows I have. so it works for initial 1st #dynamicRow added, the problem is when I have two or more #dynamicRows
$('#dynamicRow').on('click', 'input[id^=race]', function () {
if ($(this).is(":checked")) {
if ($(this).val() == "Other") {
$(".cssclass").each(function (index) {
$(this).closest("div").show();
});
}
else {
$(".cssclass").each(function () {
$(this).closest("div").hide();
});
}
}
});
Below are dynamic rows, for help purposes i am showing the html code, however, it doesn't exist on the screen, a user will click "ADD" to generate the code below. I have no problem in generating dynamic row and it is not why I am posting. note the name in my radio button is generated by c# and everything works. Again the problem is not how to create a dynamic row, it is nicely taken care of in C#.
Dynamic row one works with the above jQuery:
<div id="dynamicRow">
<input type="radio" value="No" id="race[]" name="Person[hhhhhh].race"> No:
<input type="radio" value="Other" id="race[]" name="Person[hhhhhh].race"> Other:
<div id="iamhidden" class="cssclass">
I appear one at a time, when other radio button is checked
</div>
</div>
Dynamic row two doesn't work with the above jquery and it takes the above form events as its own, so if i check the radio button in row 2, the 1st dynamic row responds to that event and vice versa:
<div id="dynamicRow">
<input type="radio" value="No" id="race[]" name="Person[hhhhh].race"> No:
<input type="radio" value="Other" id="race[]" name="Person[hhhhh].race"> Other:
<div id="iamhidden" class="cssclass">
I appear one at a time, when other radio button is checked
</div>
</div>
Working Example
id should be unique in same document, replace the duplicate ones by a class :
<input type="radio" value="No" class="race" name="Person[hhhhhh].race"> No:
<input type="radio" value="Other" class="race" name="Person[hhhhhh].race"> Other:
Also add class and not id to the dynamic rows generated by your C# code :
<div class="dynamicRow">
Then in your js use this class :
$(".cssclass").hide();
$('.dynamicRow').on('click', '.race', function () {
if ($(this).val() == "Other") {
$(this).next(".cssclass").show();
} else {
$(this).nextAll(".cssclass").hide();
}
});
Hope this helps.
Try this:
$('body').on('click', '#dynamicRow', function () {
if ($(this).find('[value=Other]').is(":checked")) {
$(".cssclass").each(function (index) {
$(this).closest("div").show();
});
} else {
$(".cssclass").each(function () {
$(this).closest("div").hide();
});
}
});
He is a working example of what you wanted. I am generating the required with js only.
Few Points to mention
you add the event listener to the parent of the dynamic generated content.
Avoid use of IDs if they are not going to be unique and prefer classes and pseudo selectors if required
var counter = 0;
function addNewEntry(){
++counter;
var str = '<div class="dynamicRow"><input type="radio" value="No" id="race[]" name="Person[hh'+counter+'].race"> No:<input type="radio" value="Other" id="race[]" name="Person[hh'+counter+'].race"> Other:<div id="iamhidden" class="cssclass"> I appear one at a time, when other radio button is checked</div> </div>';
$('#dynamicRowContainer').append(str);
$("#dynamicRowContainer .dynamicRow:last-child .cssclass").hide()
}
$('#dynamicRowContainer').on('change', '.dynamicRow > input', function () {
if(this.value=="Other"){
$(this).siblings('.cssclass').show();
}else{
$(this).siblings('.cssclass').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addNewEntry()">Add New Entry</button>
<div id="dynamicRowContainer">
</div>
i have some checkboxes that are displayed by doing a select in database that represents tables of a restaurant. Those tables that are already reserved i add them an disabled attribute. The problem with my script is that i only want to select three tables max and that means i need to add disabled atribute to the other to block them. and when i want to deselect those 3 already selected i need to remove the disabled attribute. Problem is that it removes the attribute from all tables even those that are reserved and selected from database.
Here is my script:
JSFIDDLE HERE
<script type="text/javascript">
var $checks = $(".table").change(function () {
if ($checks.filter(":checked").length<3)
{
$(".formular").toggle($checks.filter(":checked").length>0);
$checks.not(":checked").removeAttr("disabled");
}
else
{
$checks.not(":checked").attr("disabled", "disabled");
}
});
</script>
Added a class .ignore to the input disabled from start and in js binding change event only to checkboxes without the ignore class as mentioned by #lolka_bolka
HTML
<input type="checkbox" class="bowling ignore" disabled/>
<input type="checkbox" class="bowling ignore" disabled/>
<input type="checkbox" class="bowling"/>
<input type="checkbox" class="bowling"/>
JS
var $checks = $(".bowling:not(.ignore)").change(function () {
if ($checks.filter(":checked").length < 3) {
$(".formular").toggle($checks.filter(":checked").length > 0);
$checks.not(":checked").removeAttr("disabled");
} else {
$checks.not(":checked").attr("disabled", "disabled");
}
});
:not(foo){} will match anything that isn't foo, including html and
body. Source
Demo
I have an input field that only shows when the option "Other" is checked. The input field fades out when I uncheck the "Other" checkbox, but I would also like the input field to fade out say if, instead of unchecking the "Other" checkbox I check another checkbox of the same group. Therefore, the "Other" input field should not be visible unless "Other" is checked. I have the javascript partially working, but when I check another checkbox the "Other" input field stays visible.
HTML
<input type="checkbox" id="residence_check" name="found"/>
<label for="residence_check">
Residence
</label>
<input type="checkbox" id="tradeshow_check" name="found"/>
<label for="tradeshow_check">
Tradeshow
</label>
<input type="checkbox" id="office_check" name="found"/>
<label for="office_check">
Office Building
</label>
<input type="checkbox" id="check_other" value="found_other" name="found"/>
<label for="check_other">
Other
</label>
<input type="text" id="check_input" placeholder="Other"/>
Javascript
$('#check_other').change(function() {
if($(this).is(":checked")) {
$('#check_input').fadeIn();
} else {
$('#check_input').fadeOut('fast');
}
});
From what I gather from your use case is that you don't want to use checkboxes, but radio buttons. If that is the case, this would be a good way to implement what you want:
http://jsfiddle.net/AeP58/1/
$('input[type=radio]').on('change', function() { //event on all radio buttons
if($(this).attr('id') == 'check_other' && $(this).prop('checked')) {
$('#check_input').fadeIn();
} else {
$('#check_input').fadeOut('fast');
}
});
If you do want checkboxes, you could change the code a bit and probably get what you want.
If you want to have some fun with checkboxes you could try this:
function showHideOtherInput() {
console.log($(this)[0]==$('#check_other')[0]);
var shouldShow=$('[id$="_check"]:checked').length===0 && $('#check_other').prop('checked');
console.log(shouldShow);
if(shouldShow) {
$('#check_input').fadeIn();
} else {
$('#check_input').fadeOut('fast');
}
}
$('#check_input').hide(); //since nothing is selected at this point just hide the input
$('#check_other').change(showHideOtherInput);
//for each XXXX_check checkbox trigger the show or hide function
$('[id$="_check"]').each(function(ix,el){$(el).change(showHideOtherInput)});
Hope this works for you.
:)
I have this issue with enabling and disabling section of fields if other section of fields have specific value.
Consider jsfiddle for html code.
Conditions are
If all the fields of partA are selected as No, then enable partB.
If all the fields of partB are selected as No, then enable partC.
Try 1
First I tried disable elements of PartB and PartC which did not work.
$(function () {
$('.group').attr('name','partB').find('input').attr('disable', true);
$('.group').attr('name','partC').find('input').attr('disable', true);
});
I am not sure how would make sure if all the child elements are selected as No in a group div.
jsBin demo
Having this HTML:
<div class="group" id="partA">
<span> PART A</span><br/>
Option 1
<input type="radio" name="optionsRadios1" value="option1"/>Yes
<input type="radio" name="optionsRadios1" value="option2"/>No
<br />
Option 2
<input type="radio" name="optionsRadios2" value="option1"/>Yes
<input type="radio" name="optionsRadios2" value="option2"/>No
</div>
jQ:
$(function () {
$('#partB, #partC').find('input').prop('disabled', true);
function testChecked(){
var $par = $(this).closest('.group');
var $rad2 = $par.find('[value="option2"]');
var allNo = $rad2.filter(':checked').length == $rad2.length;
$par.next('.group').find(':radio').prop('disabled', !allNo);
if(!allNo){
$par.nextAll('.group').find(':radio').prop({'disabled':true, 'checked':false});
}
}
$('.group :radio').change(testChecked);
});
The above will work also for more than 2 radio groups per .group
Your errors:
"disable", "true" should be "disabled", "true"
<label> can control only one inner element (so I removed it.)
<div> afaik is not supposed to have a name attribute (so I assigned an ID)