i have jquery for disable buttons
if check box checked then button enabled
document.getElementById('disabler').onchange = function() {
if ($(disabler).is( ":checked" ) ){
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css( 'cursor', 'pointer' );
} else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css( 'cursor', 'not-allowed' );
}
}
});
there is many checkbox but this code work only for first check box only !
Use this:
$(document).on("change", "<selector for disablers>", function() {
if (this.checked) {
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css('cursor', 'not-allowed');
}
});
<selector for disablers> should probably be a class (.disabler) rather than id, since you said you have many of them.
there is many checkbox but this code work only for first check box only !
IDs must be unique.. You should class instead.
Example of using class selector
$('.disabler').change(function () {
if ($(this).is(":checked")) {
$("#signin_submit").prop('disabled', false).css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true).css('cursor', 'not-allowed');
}
});
Try use only jQuery:
$('#disabler').change(function() {
if ($(this).is(":checked")) {
$("#signin_submit").prop('disabled', false).css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true).css('cursor', 'not-allowed');
}
});
Try this:
$("#disabler").change(function(){
if ($("#disabler").is( ":checked" ) ){
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css( 'cursor', 'pointer' );
}
else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css( 'cursor', 'not-allowed' );
}
});
I agree, you are already using jQuery, so use it.
However, and in addition, you are calling the jQuery object far too many times. If you are parsing through to get the jQuery object more than once, then you should create local variables.
Second, you might consider using the power of closures for things like this:
function wireDisabler() {
// closures
var $cbxDisabler = $('#disabler');
var $btnSubmit = $("#signin_submit");
var fOnChange = function() {
var bChecked = $cbxDisabler.is(':checked');
$btnSubmit.prop('disabled', !bChecked)
.css('cursor', (bChecked ? 'pointer' : 'not-allowed'));
};
// handle event
$cbxDisabler.change(fOnChange);
}
if you have more than one disabler in you page, firstly you should use class attribute instead of ID, then easily do this:
$(document).on("change", ".disabler", function(){
//your stuff
});
ID attribute is used as a unique identifier.
check this working DEMO;
Related
I want to toggle some inline CSS with a jQuery script, but I can't do it with a class, because I get the value of the padding-top dynamically, here is the function :
$('.button').click(function(){
$(this).toggleClass('active');
});
var tagsHeight = $('span').outerHeight();
$(".button").click(function (){
if ($(this).is('active')) {
$(".change").css('padding-top', '0');
}
else if ($(this).not('active')) {
$(".change").css('padding-top', tagsHeight);
}
});
An a example here : https://jsfiddle.net/o1pbwfuo/
I really don't get why this is not working correctly ...
Thanks !
The issue with your code is due to the incorrect selector in not(). That being said, you can improve your logic by combining the click() event handlers, then using a single ternary expression to set the padding-top on the required element based on the related class. Try this:
var tagsHeight = $('span').outerHeight();
$('.button').click(function() {
var active = $(this).toggleClass('active').hasClass('active');
$(".change").css('padding-top', !active ? '0' : tagsHeight);
});
Working example
You made a mistake while using .is and .not.
You need to address the class itself inclusive the dot at beginning.
$('.button').click(function(){
$(this).toggleClass('active');
});
var tagsHeight = $('span').outerHeight();
$(".button").click(function (){
if ($(this).is('.active')) {
$(".change").css('padding-top', '0');
}
else if ($(this).not('.active')) {
$(".change").css('padding-top', tagsHeight);
}
});
https://jsfiddle.net/06ek4fej/
By the way, the else-if request is nonsense.
If = true or if = false. Else If results the same as else.
$(".button").click(function (){
if ($(this).is('.active')) {
$(".change").css('padding-top', '0');
}
else {
$(".change").css('padding-top', tagsHeight);
}
});
On click you can check whether element has active class or not and there is no need to add two click methods on '.button'.
var tagsHeight = $('span').outerHeight();
$(".button").click(function (){
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$(".change").css('padding-top', '0');
}
else{
$(".change").css('padding-top', tagsHeight);
}
});
You can use Has class method for the check is active class exist or not.
$(".button").click(function (){
if ($(this).hasClass('active')) {
$(".change").css('padding-top', '0');
}
else{
$(".change").css('padding-top', tagsHeight);
}
});
I am trying to use the same button to trigger an ajax call to add a database entry if it is clicked and then trigger a different ajax call to remove the entry it is clicked again.
I have tried using toggleClass and although the button class does change and it's appearance changes accordingly the function still thinks it has the old class name.
$(document).ready(function() {
$(".selected").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected selected_btn');
});
$(".selected").on("click", function() {
alert('selected');
});
$(".selected_btn").on("click", function() {
alert('de selected');
});
});
With the present code the alert is always 'selected'.
$(document).ready(function() {
$(".selected_btn").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected');
if($(this).hasClass("selected"))
alert("Selected")
else
alert("de-Selected")
});
});
here is a fiddle:
http://fiddle.jshell.net/prollygeek/3LLN2/
Here is a simple and readable example on how to do this:
$(document).ready(function() {
$('.select-img').on('click', function(){
var $el = $(this);
var isSelected = $el.attr('data-selected');
if( isSelected != 'true' ){
firstFn();
$el.html('Use Image').attr('data-selected', true)
}else{
secondFn();
$el.html('Select').attr('data-selected', false)
}
})
var firstFn = function(){
alert('first thing to do');
}
var secondFn = function(){
alert('second thing to do');
}
})
Demo
Use *Class functions:
hasClass
removeClass
addClass
Working code:
$("a").on("click", function() {
if($(this).hasClass("bob")) {
// do delete
alert("delete");
$(this).removeClass("bob");
} else {
// do insert
alert("insert");
$(this).addClass("bob");
}
});
Demo
$(".selected").on("click", function() {
alert('selected');
});
Overrides the event you put on the beginning of the document.ready, I think.
(might not be true, but I think it is)
I have the following jQuery code at 2 places of the same JS file;
$("#myGrid").delegate(".icon-right", "click", function() {
//Some code
});
$("#myGrid").delegate(".icon-down", "click", function() {
//Some code
});
So the diff is I am listening to click events on icon-down/icon-right
Is it possible to optimize / merge these 2 statements ?
Combine both of them
$("#myGrid").delegate(".icon-right", "click", function () {
//Some code
}).delegate(".icon-down", "click", function () {
//Some code
});
Use .on() after jQuery 1.7
Make the selector match both:
$("#myGrid").delegate(".icon-right,.icon-down", "click", function() {
//Some code
});
Try to use the multiple selector,
same function for all the elements:
$("#myGrid").delegate('click','.icon-right,.icon-down', function(e){
});
different functionality for different elements:
$("body").delegate('click','.icon-right,.icon-down', function(e){
if ($(this).is('.icon-right')) { }
else { }
});
yes you can do this:
$("#myGrid").delegate(".icon-right, .icon-down", "click", function () {
if(this.className === 'icon-right'){ // some code}
else if(this.className === 'icon-down'){ // some code}
});
If you are using jquery 1.7+ then you can try with .on() with switch:
$("#myGrid").on("click", ".icon-right, .icon-down", function () {
switch(this.className){
case 'icon-right':
//some code
break;
case 'icon-down':
// some code
break;
}
});
my problem is the following:
I styled my Checkboxes on my WebSite with this IMG / CSS / jQuery Code
The interesting part is this:
<script type="text/javascript">
$(document).ready(function() {
// Iterate over checkboxes
$("input[type=checkbox].switch").each(function() {
// Insert mark-up for switch
$(this).before(
'<span class="switch">' +
'<span class="mask" /><span class="background" />' +
'</span>'
);
// Hide checkbox
$(this).hide();
// Set inital state
if (!$(this)[0].checked) {
$(this).prev().find(".background").css({left: "-56px"});
}
}); // End each()
// Toggle switch when clicked
$("span.switch").click(function() {
// If on, slide switch off
if ($(this).next()[0].checked) {
$(this).find(".background").animate({left: "-56px"}, 200);
// Otherwise, slide switch on
} else {
$(this).find(".background").animate({left: "0px"}, 200);
}
// Toggle state of checkbox
$(this).next()[0].checked = !$(this).next()[0].checked;
});
}); // End ready()
</script>
Now I want to access:
<input type="checkbox" id="light2" class="switch">
How do I have to adress the ID Tag with JavaScript?
I tried something like this:
<script>
$(document).ready(function(){
$("span.switch + #light2").click(function(){
if($(this).next()[0].checked)
{
alert('checked');
}
else
{
alert('unchecked');
}
});
});
</script>
Thanks for any hint
$(document).ready(function(){
$("#light2").click(function(){
if($("#light2").is(":checked"))
{
alert('checked');
}
else
{
alert('unchecked');
}
});
});
Working Example: http://jsfiddle.net/bA2fX/
If your intent is to style every .switched element, you should do it via CSS.
If your needs are more complex then you can do it by selecting every .switch class element using $('.switch'). For example:
$('.switch').css('color', 'red');
Instead, to select specific elements with an ID (since it must be unique) you can simply to use $('#light2'). For example:
$('#light1').on( 'click', function( evt ) {
evt.preventDefault();
if ($(this).is(':checked')) {
/* your AJAX code */
}
});
$('#light2').on( 'click', function( evt ) {
evt.preventDefault();
if ($(this).is(':checked')) {
/* your AJAX code */
}
});
However, since part of your code is created at runtime by jQuery, you'll have to style and attach events (well, for this last you could also delegate) at the end of the onDomReady pseudo-event, otherwise your code won't find the requested elements.
Thanks to ClarkeyBoy, the solution is:
<script>
$(document).ready(function(){
$("#light2").prev("span.switch").click(function() {
if($("#light2").attr("checked"))
{
alert('checked');
}
else
{
alert('unchecked');
}
});
});
</script>
My hide class does not accept the toggleClass:
function overFx (element, classN) {
if (!element.hasClass('ligado')){
if (!$.browser.webkit && !$.browser.opera){
//TR
element.toggleClass(classN);
} else {
//TD
element.children("td:not(.media)").toggleClass(classN);
}
}
}
//EFEITOS PARA DESTACAR LINHAS:
//MOUSE OVER:
$("tr.destacar:not(.hide)").mouseover(function (){
overFx($(this), "mouseoverTr");
}
);
$(".hide").mouseover(function (){
overFx($(this), "mouseoverTrHide");
}
);
//MOUSE OUT:
$("tr.destacar:not(.hide)").mouseout(function (){
overFx($(this), "mouseoverTr");
}
);
$(".hide").mouseover(function (){
overFx($(this), "mouseoverTrHide");
}
);
I'll post the Jsfiddle later.
The $("tr.destacar:not(.hide)") par is working perfectly, but the $(".hide") isn't , and it should be! they are there , I console.logged it , the $(this) returns exactly what I wanted.
You have a typo in your $(".hide").mouseout(...) method, you have .mouseover(...) instead.
To re-iterate, you have $(".hide").mouseover twice, where the second one should be a .mouseout instead.
Demo: http://jsfiddle.net/ducYE/