I have the following code that run's when a radio button is clicked on. However I am trying to change it so it only runs if the radio button that is being clicked is NOT disabled.
Could anyone help me with this?
$('#divName').on('click', 'input[type="radio"]', function(event) { }
One way would be the use of :not()
$('#divName').on('click', 'input[type="radio"]:not([disabled])', function(event) { }
another would be to exit the function immediately if it is inactive..
$('#divName').on('click', 'input[type="radio"]', function(event) {
if (this.disabled) return;
});
You could use the :enabled selector:
$('#divName').on('click', 'input[type="radio"]:enabled', function(event) { }
But depending on what exactly you want to do, you might want to use the change event instead:
$('#divName').on('change', 'input[type="radio"]', function(event) { }
how about (not tested):
$('#divName').on('click', 'input[type="radio"]:enabled', function(event) { }
Related
I've a simple form with a text input and a button disabled, this button can be enabled if i write on input text, keyup() is the best way but when i use right click and paste this event isn't called and doesn't trigger that event. So i tried event change(), it's work but not immediately, i must unfocus the input text for have the button enabled. How can i enable this button immediately with copy and paste?
$(document).ready(function () {
$('#id_input').bind('keyup paste click', function () {
if ($('#id_input').val().length === 6 ){
$('#btnSubmit').removeAttr('disabled');
}
else
$('#btnSubmit').attr('disabled', 'disabled');
});
});
Rory is right that your code should work in general especially if you paste using Ctrl + V.
I assume that you experience the issue only if you paste using right-click and then select Paste from the context menu.
Try to monitor the property changes:
$(document).ready(function() {
$('#id_input').bind('input propertychange', function() {
if ($('#id_input').val().length === 6) {
$('#btnSubmit').removeAttr('disabled');
} else
$('#btnSubmit').attr('disabled', 'disabled');
});
});
You need to use the onpaste event.
$(document).ready(function () {
$('#id_input').bind('keyup onpaste click', function () {
if ($('#id_input').val().length === 6 ){
$('#btnSubmit').removeAttr('disabled');
} else {
$('#btnSubmit').attr('disabled', 'disabled');
}
});
});
I'm new to JavaScript, I wonder, how can I make this:
I have menu item, then you click on it, info box pops up, there's X in corner, you close it and that's it. But my goal is not only on click show it, but even then you hover it. Here's script, if you need CSS let me know.
$('#help').appendTo('.navbar-container .level1');
$('#help a').click(function(e) {
e.preventDefault();
if($('#help').hasClass('active')) {
$('#help').removeClass('active');
} else {
$('#help').addClass('active');
}
$('#help-block').toggle();
});
$('#help-block .help-close').click(function(e) {
e.preventDefault();
$('#help-block').css('display','none');
$('#help').removeClass('active');
});
Thanks, people! Happy new year.
Multiple events can be bound to one .on() method, e.g:
$('#help a').on('click hover', function(e) {
// continue
});
Description: Attach an event handler function for one or more events to the selected elements.
Ref: .on() | jQuery API Documentation
Consider using this method instead.
Use .on() and mouseover like this:
$('#help').appendTo('.navbar-container .level1');
$('#help a').on("click mouseover",function(e) {
e.preventDefault();
if($('#help').hasClass('active')) {
$('#help').removeClass('active');
} else {
$('#help').addClass('active');
}
$('#help-block').toggle();
});
$('#help-block .help-close').on("click mouseover",function(e) {
e.preventDefault();
$('#help-block').css('display','none');
$('#help').removeClass('active');
});
$("#button1").click(function(e)
{
//action
});
$("#button2").click(function(e)
{
//do something
$("#button1").click(function(f)
{
//do something else
});
});
I have two buttons doing different actions.but if button 2 is clicked,i need button 1 to do a different task on the next click without the first function being executed.
any suggestions?
For that ,you need to use one variable scope for detect whether button 1 or 2 is click
var btn = 1; // default
$("#button1").click(function(e)
{
if(btn){
#button1 click
}
else{
#after button2 click
}
});
$("#button2").click(function(e)
{
btn = 2; //change value after button2 click
});
I suggest you look into jQuery's .on() and .off() capabilities.
http://api.jquery.com/on/
http://api.jquery.com/off/
As it says in the 'off' link above, you can create namespaces for your click events, so you can add and remove just the particular on and off events you like. Something like this:
$("#button1").on("click.myName", function(e){
//action
});
$("#button2").click(function(e){
//do something
$("#button1").off("click.myName").on("click.myOtherName", function(e) {
//do something else
});
});
This allows you to target your click events more directly, and not call .off() generically, wiping out all click events.
One method you could use is by unbinding any event listener before adding a new event listener to the button you want to change.
This can be done with the on() and off() functions in Jquery.
$("#button1").off('click').on('click',function(e)
{
//action
});
You can then do the same thing with button 2...
$("#button2").off('click').on('click',function(e)
{
//action
$("#button1").off('click').on('click',function(e)
{
//action
});
});
By doing this, the last on click that you set is the only one that will occur when you click that element.
You may try this once
$("#button1").click(function(e)
{
//action
});
$("#button2").click(function(e)
{
//do something
$("#button1").unbind();
$("#button1").bind('click', function(f)
{
//do something else
});
});
I hope this would work for you.
Here is my code, I have two checkboxes and want to keep one disabled until the other one is enabled:
$(function(){
$('#remember').live('click', function(event){
if($('#remember').is(':checked')){
$('#keepIn').removeAttr('disabled');
}
else
$('#keepIn').attr('disabled', 'disabled');
});
});
The problem is that this function executes before the default action and when I click in the first one $('#remember').is(':checked') returns false (the old value) instead of true.
You can use change event instead:
$('#remember').live('change', function(event) {
if (this.checked) {
$('#keepIn').removeAttr('disabled');
} else {
$('#keepIn').attr('disabled', 'disabled');
}
});
DEMO: http://jsfiddle.net/jP3NY/
NB: live method is deprecated. You should better use on or delegate.
For the newer version of jQuery the solution could be as follows:
$('body').on('change', '#remember', function(event) {
$('#keepIn').prop('disabled', !this.checked);
});
Instead of body you can use any parent element of #remember.
I have the following function to open an overlay menu:
$('.context-switch').click(function() {
$(".context-switch-menu").toggle();
});
To hide the menu, I would like the user to be able to click on any area outside ".context-switch-menu"
I am trying with :not() but with no success..
$('body').click(function(e) {
if ($(e.target).hasClass('context-switch')) {
return;
}
$(".context-switch-menu").hide();
});
$('.context-switch').click(function() {
$(".context-switch-menu").toggle();
return false;
});
The reason this can be difficult is because of event bubbling.
You can try something like this:
$('.context-switch').click(function(e) {
e.stopPropagation();
$(".context-switch-menu").toggle();
});
$(".context-switch-menu").click(function(e){
e.stopPropagation();
});
$("body").click(function(e){
$(".context-switch-menu").hide();
});
The e.stopPropagation() prevents the click event from bubbling to the body handlers. Without it, any click to .context-switch or .context-switch-menu would also trigger the body event handler, which you don't want, as it would nullify the effect of the .context-switch click half the time. (ie, if the state is hidden, and then you click to show, the event would bubble and trigger the body handler that would then hide the .context-switch-menu again.)
Without testing, would something like this work?:
$('.context-switch').click(function() {
$(".context-switch-menu").show();
});
$(document).click(function() {
$(".context-switch-menu").hide();
});
Instead of using document, 'html' or 'body' may work as well.
$(document).on('click', function(e) {
if (e.target.className !='context-switch-menu') {
$(".context-switch-menu").hide();
}
});
Just an idea here, based on what what others have suggested in the past:
$(document).click(function(e){
//this should give you the clicked element's id attribute
var elem = $(e.target).attr('classname');
if(elem !== 'context-switch-menu'){
$('.context-switch-menu').slideUp('slow');
//or however you want to hide it
}
});
try this, we don't want to call a function when you clicked on the element itself, and not when we click inside the element. That's why we need 2 checks.
You want to use e.target which is the element you clicked.
$("html").click(function(e){
if( !$(e.target).is(".context-switch-menu") &&
$(e.target).closest(".context-switch-menu").length == 0
)
{
alert("CLICKED OUTSIDE");
}
});
Live fiddle: http://jsfiddle.net/Xc25K/1/