How do I enable/disable a button, using another button? - javascript

I'm trying to enable/disable some buttons, using another toggle button.
I'm trying to do it by adding a class 'active' to the buttons, and targeting only the buttons with the class.
Here is an example (That doesn't work):
$('#on-off').on('click', () => {
$('#test').addClass('active');
$('#indication').text('Test is active');
});
$('#test .active').on('click', () => {
$('#result').text('Test was clicked!');
});
<button id='on-off'>Toggle Test</button>
<div id='indication'></div>
<button id='test'>Test</button>
<div id='result'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The full code is here.

You should set the disabled property to enable or disable it. You can use .prop() method
Also note #test .active will not work as its descendant selector and button has no child element.
$('#on-off').on('click', () => {
$('#test').prop('disabled', !$('#test').prop('disabled'));
$('#indication').text('Test is active');
});
$('#test').on('click', () => {
$('#result').text('Test was clicked!');
});
<button id='on-off'>Toggle Test</button>
<div id='indication'></div>
<button id='test'>Test</button>
<div id='result'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Related

my jquery toggle function is not toggling

I'm trying to get the button to toggle between showing text in different languages. When I click the button nothing happens, can someone help out please?
$(document).ready(function() {
$('[lang="jp"]').hide();
$(document).on('click', '#switch-language', function() {
$('[lang="en"]').toggle();
$('[lang="jp"]').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="switch-lang">Switch Language</button>
<p lang="en">eigo</p>
<p lang="jp">en japon</p>
You have a typo in your Selector.
$(document).ready(function() {
$('[lang="jp"]').hide();
$(document).on('click', '#switch-lang', function() {
$('p[lang="en"]').toggle();
$('p[lang="jp"]').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="switch-lang">Switch Language</button>
<p lang="en">eigo</p>
<p lang="jp">en japon</p>
No element has "switch-language" as the ID. When you change it to the correct value, "switch-lang", it works.

How to add only one click event on a label?

Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>

When checkbox is checked show hidden button and hide the visible button

I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>
Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>
Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.
Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>

jQuery toggleClass only toggles once

I have a div which i am trying to toggle its class from one to another. I am able to toggle it only once but it will not return to the original class. I looked around for possible answers and looked into the propogation function, however i am unsure this is the correct use?
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
<script>
$(startStopCount).click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
</script>
</body>
You are getting the element via $('.cInact'). However, when you toggle the class .cInact, you can no longer get that element by $('.cInact') (it doesn't have that class anymore).
You can either do a selection with $('#counter') (getting the ID instead of the class, because you aren't toggling the ID) or assign the element reference to a variable:
var myAwesomeCounter = $('.cInact');
// Then use
myAwesomeCounter.toggleClass('cDown cInact');
Well, you're selecting the class 'cInact' and then toggling it's class.
i.e- removing it.
Wen you're trying to select the element again with the same selector: classname == cInact it's no longer true for that element. so you select nothing, and nothing happens.
To fix this, try using a different selector- e.g- id, like so-
$('#counter').toggleClass('cDown cInact');
The selector $(startStopCount) is wrong. It should be $("#startStopCount")
$('#startStopCount').click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
</body>
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
Better perhaps:
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('body').click(function () {
$('#counter').removeClass('cDown');
});

HTML + JS How to change/unchange text onclick

I would like to write a JS that changes text on a button when clicked (to 'SHOW'), but when another button is clicked then the previously clicked button will change its text from 'SHOW' to initial text (eg 'A')
Scenario:
1. click on button A -> 'A' changes to 'SHOW'
2. click on button B -> 'B' changes to 'SHOW' but also 'SHOW'(from button A) changes back to 'A'
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Above you will find example buttons i have in html file.
In JS file i have:
$("button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
previously i used class selector not id one, but still could not accomplish what i wanted. The add and remove CSS works really ok
I think this is what you are looking for:
$("button").click(function() {
var clicked_button = $(this);
$("button").each(function() {
if($(this).is(clicked_button)) {
$(this).text('SHOW');
}
else {
$(this).text($(this).attr('value'))
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Check working example here https://jsfiddle.net/prxd81vk/
You already have your solution, because when you add a class to the last pressed button, you can use it to change the text back:
$("button").on('click', function () {
$('.btn_click')
.text($('.btn_click').val())
.removeClass('btn_click');//this is a css class that changes bgcolor
$(this).addClass('btn_click');
$(this).text('SHOW');
});
You must use $("#button1") to properly select the button by id. This onClick is not actually associated to any of the buttons.
You need to keep track of the old text of the button and revert back to it when another button is pressed.
Example:
$("button").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$("[data-old-text]").each(function () {
$(this).text($(this).attr("data-old-text"));
$(this).removeAttr("data-old-text");
});
$(this).addClass('btn_click');
$(this).attr("data-old-text", $(this).text());
$(this).text('SHOW');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">A</button>
<button id="button2">B</button>
<button id="button3">C</button>
Use this :
Button 1 click :
$('#button1').click(function () {
$('#button1').text('Show');
});
Buttton 2 click :
$('#button2').click(function () {
$('#button2').text('show');
$('#button1').text('old value');
});
I would change targeting elements from id to class attribute.
<button class="button" value="A">A</button>
<button class="button" value="B">B</button>
<button class="button" value="C">C</button>
The script would then first clear the 'btn_click' class from any other buttons, and then apply the 'active' class to the button that was clicked.
$("button").on('click', function () {
$('.button').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
To select element by ID you must use $("#button1").
Try like this:
$("#button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
And after that add whatever you want to do with other two buttons (set A,B,C).
You can try this code..
<script>
$(document).ready(function()
{
$('#button1').click(function()
{
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('Show');
$('#button2').text('B');
});
$('#button2').click(function()
{
$('#button1').text('A');
$(this).text('Show');
});
});
</script>

Categories

Resources