Develop Reference

Disable mouse pressed using jQuery

I am writing a code to add or subtract from a total amount based on the change in an value of input box.
It is working when one click happens, but it does't work when mouse pressed event is triggered. The value changes alot but only one unit change occurs in total.
Edit Therefore I want to disable mousepressed event on page, so that change always occur one unit
$(document).ready(function (){
$('button').addClass('btn btn-danger');
var total=$('#totalspend').val();
console.log(glo);
total=parseInt(total);
$('button').on('click',function(){
if(glo==-1){
total++;
$('#totalspend').val(total);
}
else if(glo==-2){
total--;
$('#totalspend').val(total);
}
});
});
Variable "glo" detects the click on increment or decrement button.
<input type="tel" class="form-control" id="totalspend">
<div class="row">
<div class="col-md-6">
<table class="table table-hover table-sm">
<tr>
<td>Striking Speed</td>
<td><input class="form-control" type="number" value="35" id="ss"></td>
</tr>
</table>
Button to increase or decrease are added automatically by plugin
https://www.npmjs.com/package/jquery.nice-number

Target the div on which you want to disable clicking and then hook it to on click event and return false
Here is the code
$('divToDisable').on('click', function(){
return false;
});
Or you can either do this-
$('divToDisable').on('click', function(event){
event.preventDefault();
});
Hope it works!

What you want to do is to prevent default event that is being fired when button is clicked, then do your logic. Based on your code it could be done this way:
$('button').on('click', function (e) {
e.preventDefault();
if (glo == -1) {
total++;
$('#totalspend').val(total);
}
else if (glo == -2) {
total--;
$('#totalspend').val(total);
}
});

As I understand your issue, I think you need to disable the 'mouseDown' event and run your function on 'click' event.
$('divToDisable').on('mousedown', function(){
event.preventDefault();
}).on('click', function(){
//your click function goes here
});

JavaScript: Hide button link if input field is empty

I am trying to hide a button link (id="btnsubmit") whenever the input field (id="valagency") is empty, so that my user can only click on the button after the input field is filled with some data.
For the html part, I have
<tr>
<td class="tbldatastart">
<input type="text" id="**valagency**" name="agencyname<%= strAgencyId %>" class="btn10" readonly>
<input type="text" name="agencyid<%= strAgencyId% >">
Map
</td>
</tr>
<tr>
<td colspan="2"></td>
<td>Submit</td>
</tr>
And for the javascript, I have
function Submit() {
$("#valagency").keyup(function(){
if($(this).val()) {
$("#btnsubmit").show();
} else {
$("#btnsubmit").hide();
}
});
}
The submit button is still there. I do not know where I did wrongly. Please help.
Thanks in advance.

You're calling function submit at that time your enable disable button code will execute.
you need to use that code independently not on submit call.
Place following code out of submit function:
$("#valagency").keyup(function(){
if($(this).val() == "") {
$("#btnsubmit").show();
} else {
$("#btnsubmit").hide();
}
});
If you want to disable submit on submit button click how it's possible when you've used keyup event.
If you want to do so on submit button click then you need to use keyup.
If you want to use keyup then code will be outside of submit function.
Keyup will not work on pasting data to input.
For that consider this example.
<input type="text" name ="mytxt" id="mytxt">
Submit
$('input[name=mytxt]').change(function() {
if($(this).val() == "") {
$("#btnsubmit").hide();
} else {
$("#btnsubmit").show();
}
});
If you want to hide button on page load then you can go with https://jsfiddle.net/kurbhatt/m06yywmn/2/

The problem is that you're running your keyup() function on click of the submit button. This will never execute. Simply move your keyup() function outside of this button click. You'll also want to hide #btnsubmit by default.
Here's a minimal example:
$("#btnsubmit").hide();
$("#valagency").keyup(function() {
if ($(this).val()) {
$("#btnsubmit").show();
} else {
$("#btnsubmit").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="valagency">
Submit
Hope this helps! :)

Instead of keyup event, use change event to get the final value of input field and check for it's emptiness.

It's just related with input keyup event, so If you want to check the input's value to hide/show the button. make it independent with 'submit', it should be hide/show before the 'submit'.
function submit() {
//do something
}
$("#valagency").keyup(function(){
if($(this).val() == "") {
$("#btnsubmit").show();
} else {
$("#btnsubmit").hide();
}
});

How can I toggle a radio button's checked state with jQuery?

As can be seen here, I've got this HTML:
<input type="radio" id="radbtnEmp" >rad btn</input>
...and this jQuery:
$('#radbtnEmp').click(function () {
alert("radbtnEmp clicked");
});
The alert does display when I click the radio button; However, clicking the radio button a second time does not toggle its state back to unchecked. How can I do that in jQuery?
I want to be able to respond to its state like this (or something similar):
if ($('#radbtnEmp').attr('checked', true)) {
// do stuff
} else {
// do other stuff
}
...but if the radiobutton is never checked/false, that doesn't work.

the radio buttons cannot be checked and unchecked..
For that you need to use checkboxes:
Html:
<input type = "checkbox" id = "myCheckBox">I am CheckBox</input>
jQuery:
$('#myCheckBox').on('click', function() {
if ($('#myCheckBox').is(':checked')) {
// code
}
else {
// code
}
})
Hope this helps

Trigger functions from checkbox on click by clicking on a button

I have a couple of checkboxes and a button. When I click on checkbox - function is triggered. This is the desired behavior but I want to trigger it by clicking on the button. I want to have the possibility to first select checkboxes (I tried with return false and event.preventDefault but these completely switch the selection off) and then by clicking the button - trigger functions from checkboxes. Here is a link to jsfiddle:
http://jsfiddle.net/j93k2xns/6/
So for instance: I can select 3 checkboxes (nothing should happen) and after I click the button - three alerts should appear.
The code:
HTML:
<input type="checkbox" name='check[]' id="first">first</input>
<input type="checkbox" name='check[]'>second</input>
<input type="checkbox" name='check[]'>third</input>
<input type="checkbox" name='check[]'>fourth</input>
<input type="button" value="validate" id="val-button">
JS:
var check_state;
$(document).on('click','input[name="check[]"]', function(e){
if(check_state === true) {
alert('a');
} else {
return false;
}
});
$(document).on('click','#val-button', function(){
check_state = true;
});

There are a few interpretations to his question. If I'm reading it correctly, he wants to bind an arbitrary function to the checkboxes. Clicking the button should fire this event. This is how you can achieve that using custom events in jQuery:
$(function () {
$("input[name='check[]']").bind("myCustomButtonClick", function() {
if(this.checked) {
alert('a');
}
});
})
$(document).on('click','#val-button', function(){
$("input[name='check[]']").trigger("myCustomButtonClick");
});
And the associated jsfiddle: http://jsfiddle.net/3yf7ymos/

$(document).on('click','#val-button', function(){
$( 'input[name="check[]"]' ).each(function( index ) {
if($(this).is(':checked')) {
alert("a");
return true;
}
});
});

If you want to do something when the user checks a checkbox, add an event listener:
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
// do something
}
});
If the idea is run a couple of functions after the inputs are checked by clicking on a button:
function myFunction() {
if ($('input[id="something"]:checked').length == 0) {
// do something
} else if ($('input[id="something_2"]:checked').length == 0) {
// do something
}
//and so on..
}
$('#val-button').click(function() {
myFunction();
});

I have a similar inquiry. I have a number of check boxes. Each checkbox is linked to a different URL that opens a PDF form. I want my team to be able to select which forms they need by ticking the checkbox. Once they have done that, I would like a button to trigger the opening of each form based on which check box is checked. I have it so the checkbox upon being checked opens the form right away but it is very distracting. Its preferable they all get opened at once by a "button". Help. I am quite new to JavaScript so may need additional clarity.

Disable button if all checkboxes are unchecked and enable it if at least one is checked

I have a table with a checkbox in each row and a button below it. I want to disable the button if at least one checkbox is checked.
<tbody>
<tr>
<td>
<input class="myCheckBox" type="checkbox"></input>
</td>
</tr>
</tbody>
<button type=submit id="confirmButton"> BUTTON </button>
The jQuery I came up with to accomplish this is the following:
$('tbody').click(function () {
$('tbody tr').each(function () {
if ($(this).find('.myCheckBox').prop('checked')) {
doEnableButton = true;
}
if (!doEnableButton) {
$('#confirmButton').prop('disabled', 'disabled')
}
else {
$('#confirmButton').removeAttr("disabled");
}
});
});
Naturally, this does not work. Otherwise I would not be here. What it does do is only respond to the lowest checkbox (e.g., when the lowest button is checked/unchecked the button is enabled/disabled).
I made a JSFIddle here although it does not show the same behaviour as locally.
Does any know how I can accomplish that it responds to all checkboxes and disables the button if they are ALL disabled?

Try this:
var checkBoxes = $('tbody .myCheckBox');
checkBoxes.change(function () {
$('#confirmButton').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
checkBoxes.change(); // or add disabled="true" in the HTML
Demo
Explanation, to what I changed:
Cached the checkbox element list/array to make it a bit faster: var checkBoxes = $('tbody .myCheckBox');
removed the if/else statement and used prop() to change between disable= true/false.
filtered the cached variable/array checkBoxes using filter() so it will only keep the checkboxes that are checked/selected.
inside the second parameter of prop added a condition that will give true when there is more than one checked checkbox, or false if the condition is not met.

Add an event handler that fires when a checkbox is changed, and see if there are any checked boxes, and set the disabled property appropriately :
var boxes = $('.myCheckBox');
boxes.on('change', function() {
$('#confirmButton').prop('disabled', !boxes.filter(':checked').length);
}).trigger('change');
FIDDLE

Try this:
$('tbody').click(function () {
if ($('.myCheckBox:checked').length >= 1) {
$('#confirmButton').prop("disabled", true);
}
else {
$('#confirmButton').prop("disabled", false);
}
});
DEMO

Try this one:
let $cbs = $(".myCheckBox").change(function() {
if ($cbs.is(":checked")){
// disable #confirmButton if at least one checkboxes were checked
$("#confirmButton").prop("disabled", false);
} else {
// disable #confirmButton if all checkboxes were unchecked
$("#confirmButton").prop("disabled", true);
}
});