I have a Bootstrap Toggle element as follows:
<input id="neutralInd" type="checkbox" name="neutralSite" onchange="setEventSite('neutral')" data-toggle="toggle" data-on="Yes" data-off="No">
Upon clicking it, it will toggle between Yes and No, and it successfully executes a JavaScript function that does other stuff (code below).
Here's what I want to do:
Upon selecting a Radio Button elsewhere on the page, it will execute JavaScript that toggles the Bootstrap Toggle to No. Here is the code I have so far:
Defining the radio buttons:
<div class="radio">
<label><input type="radio" id="homeTeam<?php echo $row; ?>" name="homeTeam" onchange="setEventSite('team')"></label>
</div>
JavaScript function code:
function setEventSite(chosen) {
var neutralInd = document.getElementById("neutralInd"); // Toggle
var locationOverride = document.getElementById("locationOverride"); // Text field
var homeTeam = document.getElementsByName("homeTeam"); // Radio buttons
if (chosen == "neutral") { // Toggle was clicked (changed)
if (neutralInd.checked) {
locationOverride.readOnly = false;
for(var i=0; i<homeTeam.length; i++) { homeTeam[i].checked = false; }
}
else {
locationOverride.value = "";
locationOverride.readOnly = true;
}
} else if (chosen == "team") // Radio button was selected
{
neutralInd.checked = false;
neutralInd.value="off";
locationOverride.value = "";
locationOverride.readOnly = true;
}
}
When I choose a Radio Button, it successfully sets the Text field to Readonly, but the Bootstrap Toggle does not appear to toggle (it remains set to Yes when it should switch to No). However, when I click the Toggle again, it stays on Yes yet executes the JavaScript as if it were being set to Yes. So that makes me think the value of the Toggle is successfully being set to No when I select a Radio Button, but the Toggle isn't displaying/animating the toggle to No. So maybe I'm asking how to make the Toggle show the animation of toggling to No.
Thanks!
Figured it out with the help of a good friend.
I needed to add the "off" class to the parent element of the Toggle when the radio button was selected. So I had to add 2 lines to the function, and it works as desired:
var parentInd = $("#neutralInd").parent();
parentInd.addClass("off");
So here is the resulting function code:
function setEventSite(chosen) {
var neutralInd = document.getElementById("neutralInd");
var locationOverride = document.getElementById("locationOverride");
var homeTeam = document.getElementsByName("homeTeam");
var parentInd = $("#neutralInd").parent();
if (chosen == "neutral") {
if (neutralInd.checked) {
locationOverride.readOnly = false;
for(var i=0; i<homeTeam.length; i++) { homeTeam[i].checked = false; }
}
else {
locationOverride.value = "";
locationOverride.readOnly = true;
}
} else if (chosen == "team")
{
neutralInd.checked = false;
neutralInd.value="off";
parentInd.addClass("off");
locationOverride.value = "";
locationOverride.readOnly = true;
}
}
Related
This code checks if the checkbox is enabled on site if it is disabled then it disable the textbox.
Function disableTextBox() is a onclick function and the $(function() is used to check the behavior of the checkbox after refreshing the page, I did not use the localstorage for that because sometimes different browsers are used.
How can I write this code better to do not duplicate it?
If the checkbox is checked then the textbox should be enabled, if the checkbox is not checked then the checkbox should be disabled for any input. It saves the checkbox after clicking save button (that is different functionality) not connected with this problem, and when the user back to the page it should check if the checkbox is checked or not and adjust the textfield.
Any ideas how to write it better or something?
$(function()
{
var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');
if (checkboxField.checked == true)
{
textBox.disabled = false;
}
else if (checkboxField.checked == false)
{
textBox.disabled = true;
}
});
function disableTextBox()
{
var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');
if (checkboxField.checked == false)
{
textBox.disabled = true;
}
else if (checkboxField.checked == true)
{
textBox.disabled = false;
}
}
Call your disableTextBox() function, and instead of the if/else you could use the evaluated boolean result of checkboxField.checked straight ahead:
function disableTextBox() {
var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');
textBox.disabled = !checkboxField.checked;
}
jQuery(function( $ ) {
// Do it on DOM ready
disableTextBox();
// and on button click
$('#btnDisableTextBox').on('click', disableTextBox);
// Other DOM ready functions here
});
prefering this way ;)
in this story every thing is boolean
Don't do testing if a boolean is True to déclare a true value for a if...
const
checkboxField = document.querySelector('#checkbox'),
textBox = document.querySelector('#textBox');
checkboxField.onchange = function()
{
textBox.disabled = !checkboxField.checked;
}
<label> modify texy <input type="checkbox" id="checkbox" checked>
<textarea id="textBox"disable> blah blah bla</textarea>
I have multiple buttons and when I click each one I want an element associated with that button to slide down and then when I click the same button the same element slides back up. The code below works but if I click one button it slides down then I click the second button nothing happens because it runs the else if part of the code. How would I fix this?
var moreOption = 1;
$(".more-button").click(function(){
var buttonNumber = $(this).attr('buttonNumber');
if (moreOption === 1) {
$("#more"+buttonNumber).slideDown();
moreOption = 2;
} else if (moreOption === 2) {
$("#more"+buttonNumber).slideUp();
moreOption = 1;
}
});
Just use a data-attribute on the button and switch the state manually like this:
<button class="more-button" data-showMore="1" data-buttonNumber="1"/>
$(".more-button").click(function(){
var buttonNumber = $(this).data('buttonNumber');
var moreOption = $(this).data('showMore');
if (moreOption == '1') {
$("#more"+buttonNumber).slideDown();
$(this).data('showMore', '2');
} else if (moreOption == '2') {
$("#more"+buttonNumber).slideUp();
$(this).data('showMore', '1');
}
});
I know it's easy to do using < button > or < input type="submit" but how would you keep this button disabled unless both input fields are filled?
<input id="one" type="text">
<input id="two" type="text">
OK
Tie an event to both inputs, and check that both have values. Then enable the link.
$('#one, #two').blur(function() {
if($('#one').val() !== "" && $('#two').val() !== "") {
$('.button').attr('href','#');
} else {
$('.button').removeAttr('href');
}
});
and change your html to:
<a class="button">OK</a>
so that the link is disabled on page load. Here's a JSFiddle demo.
$(document).ready(function() {
$inputs = $('#one,#tow');
$inputs.change(check);
$submit = $('#submit');
function check() {
var result = 1;
for (var i = 0; i < $inputs.length; i++) {
if (!$inputs[i].value) {
result = 0;
break;
}
}
if (result) {
$submit.removeAttr('disabled');
} else {
$submit.attr('disabled', 'disabled');
}
}
check();
});
suggest use angular form
$(document).ready(function(){
//$(".button").attr('disabled', "disabled");
$(".button").click(function(){
one = $("#one").val();
two = $("#two").val();
if(one && two){
///both fields filled.
return true;
}
//one or both of them is empty
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="one" type="text">
<input id="two" type="text">
OK
This is my implementation if facing this kind of situation.
First, am add disabled class onto anchor tag on page load by using this style :
.disabled {
color : gray // gray out button color
cursor : default; // make cursor to arrow
// you can do whatever styling you want
// even disabled behaviour
}
We add those class using jquery on document ready together with keyup event like so :
$(function () {
// add disabled class onto button class(anchor tag)
$(".button").addClass('disabled');
// register keyup handler on one and two element
$("#one, #two").keyup(function () {
var one = $("#one").val(),
two = $("#two").val();
// checking if both not empty, then remove class disabled
if (one && two) $(".button").removeClass('disabled');
// if not then add back disabled class
else $(".button").addClass('disabled');
});
// when we pressing those button
$('.button').click(function (e) {
// we check if those button has disabled class yet
// just return false
if ($(this).hasClass('disabled')) return false;
});
});
DEMO
I am having one checkbox and one input text in a row .I want when a user checks the checkbox to diable the text and clear its value.
I tried this one but nothing:
What is wrong?
HTML:
<span style="width: 200px;font-size: 80%;"><input id="chkSendSummary" type="checkbox" name="ctl03$ctl00$ctl00$chkSendSummary" onclick="checkSendSummaryLetter();"></span>
<input name="ctl03$ctl00$ctl00$txtSendSummary" type="text" id="txtSendSummary" class="NormalTextBox" style="width: 170px;">
var chkSendSummaryLetter=document.getElementById('chkSendSummary');
var txtSendSummaryLetter=document.getElementById('txtSendSummary');
if (chkSendSummaryLetter.checked) {
txtSendSummaryLetter.enabled = true;
} else {
txtSendSummaryLetter.value = "";
txtSendSummaryLetter.enabled = false;
}
You've created a custom property enabled, which has no effect on the DOM. Use disabled instead:
if (chkSendSummaryLetter.checked) {
txtSendSummaryLetter.disabled = false;
} else {
txtSendSummaryLetter.value = "";
txtSendSummaryLetter.disabled = true;
}
<script type="text/javascript">
var chkSendSummaryLetter=document.getElementById('chkSendSummary');
var txtSendSummaryLetter=document.getElementById('txtSendSummary');
if (chkSendSummaryLetter.checked) {
txtSendSummaryLetter.value = "";
hide();
}
if
function hide() {
document.getElementById('txtSendSummary').style.display = 'block';
}
</script>
This post already exists: (found in 2 seconds via google)
javascript hide/show element
you could add a parameter within the function to make it have multiple purposes
I would like to disable a submit button until one of a group of radio buttons is selected. I know there are similar questions out there, but none pertain to a dynamically-created group of radio buttons...
Here is what I have.. a script at the top of the page generates a number of buttons given a user upload in a previous view:
var jScriptArray = new Array(#ViewBag.ColNames.Length);
var array = #Html.Raw(Json.Encode(ViewBag.ColNames));
for( var i = 0; i < #ViewBag.ColNames.Length; i++ ) {
jScriptArray[i] = array[i];
}
var length = #(ViewBag.NCols);
$(document).ready(function () {
for (var i = 0; i < length; i++) {
$('#radioGroupBy').append('<input id="grp' + i +'" type="radio" name="group" value="'+i+'">'+jScriptArray[i]+'</input>')
$('#radioGroupBy').append('<p style="padding:0px;margin:0px;"></br></p>');
}
});
This works, and selecting any of the buttons returns the proper value; great. However, I want to disable the submit button until one of these radio buttons is selected. Using an answer I found on SO earlier, I created the following (this works, but only if I hard code the group of buttons. The issue is it won't work with the Javascript-created group):
var $radioButtons = $("input[name='group']");
$radioButtons.change(function () {
var anyRadioButtonHasValue = false;
// iterate through all radio buttons
$radioButtons.each(function () {
if (this.checked) {
// indicate we found a radio button which has a value
anyRadioButtonHasValue = true;
// break out of each loop
return false;
}
});
// check if we found any radio button which has a value
if (anyRadioButtonHasValue) {
// enable submit button.
$("input[name='submitbtn']").removeAttr("disabled");
}
});
Also, for the sake of thoroughness, here is the submit button:
<input id="submitbtn" name="submitbtn" type="submit" value="Drill Down" disabled="disabled" />
Thanks so much!
Event delegation (also, use .prop() when removing the disabled property to the submit button)
$("#radioGroupBy").on("change", ":radio[name=group]", function() {
var $radioButtons = $(":radio[name=group]");
var anyRadioButtonHasValue = false;
// iterate through all radio buttons
$radioButtons.each(function () {
if (this.checked) {
// indicate we found a radio button which has a value
anyRadioButtonHasValue = true;
// break out of each loop
return false;
}
});
// check if we found any radio button which has a value
if (anyRadioButtonHasValue) {
$("input[name='submitbtn']").prop("disabled", false);
}
});
I figured it out. As Benjamin suggested in comments above, the latter script was executing before the DOM was ready. I solved it by just surrounding the whole script in $(window).load... :
$(window).load(function () {
var $radioButtons = $("input[name='group']");
$radioButtons.change(function () {
var anyRadioButtonHasValue = false;
// iterate through all radio buttons
$radioButtons.each(function () {
if (this.checked) {
// indicate we found a radio button which has a value
anyRadioButtonHasValue = true;
// break out of each loop
return false;
}
});
// check if we found any radio button which has a value
if (anyRadioButtonHasValue) {
// enable submit button.
$("input[name='submitbtn']").removeAttr("disabled");
}
});
});