Enable Disable Button if any of checkbox is checked

Enable Disable Button if any of checkbox is checked - javascript

I have Check All and Check Non Section.
I want to take decision , if any of the checkbox is checked, enable Delete button otherwise disable it.
Plus I want to get all the values of checked checkboxes when click on Delete button coma seperated.
Here is my fiddle:
http://jsfiddle.net/48ZRu/2/
Here is my code:
HTML:
<input type="button" class="check" value="Check All" /> <input type="button" value="Delete" disabled /> <br/>
<input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2"/> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3"/> Checkbox 3 <br/>
JS:
$('.check:button').click(function()
{
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).data('checked', checked);
if(checked == true)
{
$(this).val('Uncheck All');
}
else
if(checked == false)
{
$(this).val('Check All');
}
});

Try
$('.check:button').click(function () {
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$('.delete:button').prop('disabled', !checked)
$(this).data('checked', checked);
if (checked == true) {
$(this).val('Uncheck All');
} else if (checked == false) {
$(this).val('Check All');
}
});
$('input:checkbox').change(function () {
$('.delete:button').prop('disabled', $('input:checkbox:checked').length == 0)
})
$('.delete:button').click(function () {
var array = $('input:checkbox:checked').map(function () {
return this.value
}).get();
console.log(array, array.join())
})
Demo: Fiddle

Give a id to delete button. Lets say if the id is delete -
$("input[type=checkbox]").on("change", function(){
if ($("input[type=checkbox]:checked").length > 0)
{
$("#delete").removeAttr('disabled','disabled');
}
else
{
$("#delete").attr('disabled','disabled');
}
});

try this
var checkedSize = $('input:checked').size()
$(':input:button[value=Delete]').attr("disabled",checkedSize === 0);

$(function() {
var delbtn = $("input:button[value=Delete]");
$("input:checkbox").change(function() {
if($("input:checkbox:checked").length)
delbtn.removeAttr("disabled");
else
delbtn.attr("disabled","disabled");
});
delbtn.click(function() {
var s=$("input:checkbox:checked").map(function(e,i) { return e.value; }).join(",");
// s now has the values, comma separated
});
});

this one should fit all your needs:
$('.cb-element').change(function(){
var checked = !$(this).is(":checked");
if(checked)
{
$("#uncheck").removeAttr("disabled");
}
else {
$("#uncheck").attr("disabled","disabled");
}
});
$('#checkall').click(function(){
$('.cb-element').attr("checked","checked");
$("#uncheck").removeAttr("disabled");
});
$('#uncheck').click(function(){
var resultArr = [];
$.each($('.cb-element'),function(){
if($(this).is(":checked")){
resultArr.push($(this).val());
}
})
alert(resultArr.join(","))
})

<input type="button" class="check" id="checkall" value="Check All" /> <input type="button" id="remove" value="Delete" /> <br/>
<input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2" /> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3" /> Checkbox 3 <br/>
$('#remove').attr('disabled', 'disabled');
$(document).ready(function() {
$('.cb-element').click(function() {
if($(this).prop('checked'))
{
$('#remove').attr('disabled', false);
}
else
{
$('#remove').attr('disabled', true);
}
});
$('.check:button').click(function()
{
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).data('checked', checked);
if(checked == true)
{
$(this).val('Uncheck All');
$('#remove').attr('disabled', false);
}
else if(checked == false)
{
$(this).val('Check All');
$('#remove').attr('disabled', true);
}
});
});

Related

Call javascript function when specific radio become unselected

I have some radio inputs and I would like to call a JS function only in the case where the id3 radio is selected and becomes unselected.
I searched, but I found only solutions, where only checked/unchecked status is checked:
$("input:radio").change(function() {
if ($("#id3").is(":checked")) {
alert('checked');
} else {
alert('unchecked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="shipping_method" value="1" id="id1" data-refresh="5" class="">
<input type="radio" name="shipping_method" value="2" id="id2" data-refresh="5" class="">
<input type="radio" name="shipping_method" value="3" id="id3" data-refresh="5" class="">

You will need to keep track of when you last clicked it, to see if you need to say that it was unselected.
Plain JS
This is fairly simple to do in pure JavaScript. You can utilize the data-* attribute design to store the state of when an element was last checked.
let targetEl = document.getElementById('id3');
Array.from(document.querySelectorAll('input[type="radio"]')).forEach(radioEl => {
radioEl.addEventListener('change', function(e) {
if (e.target.id === targetEl.id && e.target.checked) {
alert(e.target.id + ' - checked');
e.target.setAttribute('data-waschecked', true);
} else if (targetEl.getAttribute('data-waschecked') === 'true') {
alert(targetEl.id + ' - unchecked');
targetEl.setAttribute('data-waschecked', false);
}
});
});
<input type="radio" name="shipping_method" value="1" id="id1" data-refresh="5">
<input type="radio" name="shipping_method" value="2" id="id2" data-refresh="5">
<input type="radio" name="shipping_method" value="3" id="id3" data-refresh="5">
jQuery
This advanced solution allows you to monitor multiple radio buttons. It is written mostly in jQuery.
const trackableIds = [ 'id1', 'id3' ];
$('input[type="radio"]').on('change', function(e) {
let $target = $(e.target),
isTrackable = trackableIds.includes($target.attr('id'));
if (isTrackable && $target.is(':checked')) {
alert($target.attr('id') + ' - checked');
$target.attr('data-waschecked', true);
}
trackableIds.filter(trackId => trackId !== $target.attr('id'))
.forEach(trackId => {
let $trackable = $('#' + trackId);
if ($trackable.attr('data-waschecked') === 'true') {
alert($trackable.attr('id') + ' - unchecked');
$trackable.attr('data-waschecked', false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="shipping_method" value="1" id="id1" data-refresh="5">
<input type="radio" name="shipping_method" value="2" id="id2" data-refresh="5">
<input type="radio" name="shipping_method" value="3" id="id3" data-refresh="5">
As a jQuery plugin
Nearly identical behavior to the jQuery above, but as a plugin. There are even custom callback function options for checking/unchecking.
(($) => {
$.fn.trackRadio = function(ids, opts) {
this.on('change', function(e) {
let $target = $(e.target), isTrackable = ids.includes($target.attr('id'));
if (isTrackable && $target.is(':checked')) {
opts.onCheckFn($target);
$target.attr('data-waschecked', true);
}
ids.filter(trackId => trackId !== $target.attr('id')).forEach(trackId => {
let $trackable = $('#' + trackId);
if ($trackable.attr('data-waschecked') === 'true') {
opts.onCheckFn($trackable);
$trackable.attr('data-waschecked', false);
}
});
});
}
})(jQuery);
$('input[type="radio"]').trackRadio(['id1', 'id3'], {
onCheckFn : function($radio) {
alert($radio.attr('id') + ' - checked');
},
onUncheckFn : function($radio) {
alert($radio.attr('id') + ' - unchecked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="shipping_method" value="1" id="id1" data-refresh="5">
<input type="radio" name="shipping_method" value="2" id="id2" data-refresh="5">
<input type="radio" name="shipping_method" value="3" id="id3" data-refresh="5">

What you can do is add a watcher variable to find out whether you are deselecting the radio button.
var isChecked = false;
$("input:radio").change(function () {
if ($("#id3").is(":checked")) {
isChecked = true;
} else {
if (isChecked) {
alert("Unchecked");
isChecked = false;
}
}
});
CodePen: https://codepen.io/ashfaq_haq/pen/LYYjLrv?editors=1010

Uncheck all checkboxes if "Other" checkbox is checked and get value

So, I have 4 checkboxes:
Heating
AC
Cold Chain
Others
The condition is, you can multiple check the three: Heating, AC, and Cold Chain. But when you check on "Other", the three will be unchecked. And when you check again on any of the three, the Other checkbox will be unchecked.
When the Others is checked, a "Please specify" input text will appear.
And in the summary, Looking for solutions in Others - [value]
This is my fiddle
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox() {       
$("input:checkbox").change(function() {                 
selectedCB = [];        
notSelectedCB = [];                
CountSelectedCB.length = 0;        
$("input:checkbox").each(function() {            
if ($(this).is(":checked")) {                
CountSelectedCB.push($(this).attr("value"));            
}        
});                
$('input[name=solutions]').val(CountSelectedCB).blur();    
});
}   
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox() {       
$("input:radio").change(function() {                 
selectedRB = [];        
notSelectedRB = [];                
CountSelectedRB.length = 0;        
$("input:radio").each(function() {            
if ($(this).is(":checked")) {                
CountSelectedRB.push($(this).attr("value"));            
}        
});                
$('input[name=existing]').val(CountSelectedRB).blur();     
});
}
$('#solutions, #existing').bind('keyup blur', function() {            
$('#summary').val('You are looking for solutions in ' +                               $('#solutions').val() +                               (' \n') +                              'Are you using an existing customer? ' +                               $('#existing').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>

Made a simple example for you how you can do this using the prop() and siblings() functions.
Added some classes for better selectors.
$('#wrapper .some-checkbox').on('change', function() {
var $this = $(this);
if ($this.prop('checked')) {
if ($this.is('.some-others')) {
$this.siblings().prop('checked', false);
}
else {
$this.siblings('.some-others').prop('checked', false);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<input class="some-checkbox" type="checkbox" value="Heating">Heating<br>
<input class="some-checkbox" type="checkbox" value="Ac">AC<br>
<input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>
<input class="some-checkbox some-others" type="checkbox" value="Others">Others<br>
</div>

You need to check if the checkbox Others is checked, then uncheck the other checkboxes with $('<your-checkbox->').prop('checked', false);
For example:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox(){    
    $("input:checkbox").change(function() {          
        selectedCB = [];
        notSelectedCB = [];
        
        CountSelectedCB.length = 0;
        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedCB.push($(this).attr("value"));
if ($(this).attr("value") === "Others") {
CountSelectedCB = []; // reset result
$("input:checkbox").each(function() {
if ($(this).attr("value") !== "Others") {
$(this).prop('checked', false); // uncheck
}
});
$('input[name=solutions]').hide(); // toggle input
$('input[name=specify]').show(); // toggle input
}
            }
        });
        
        $('input[name=solutions]').val(CountSelectedCB).blur();
    });
}    
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox(){    
    $("input:radio").change(function() {          
        selectedRB = [];
        notSelectedRB = [];
        
        CountSelectedRB.length = 0;
        $("input:radio").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedRB.push($(this).attr("value"));
            }
        });
        
        $('input[name=existing]').val(CountSelectedRB).blur(); 
    });
}
$('#solutions, #existing').bind('keyup blur', function() {
        
    $('#summary').val('You are looking for solutions in ' + 
                             $('#solutions').val() + 
                             (' \n') +
                             'Are you using an existing customer? ' + 
                             $('#existing').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" placeholder="Please specify" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>

Well, I modified your displayCheckbox() function. Please try like this. I think your problem will be solved.
function displayCheckbox(){    
$("input:checkbox").change(function() {
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
if($('input:checkbox[value="Others"]').is(":checked")){
$('input:checkbox').not(this).prop('checked', false);
CountSelectedCB.length = 0;
CountSelectedCB.push($(this).attr("value"));
}else{
$("input:checkbox").each(function() {
if ($(this).is(":checked")) {
CountSelectedCB.push($(this).attr("value"));
}
});
}
$('input[name=solutions]').val(CountSelectedCB).blur();
});
}
Thank you.

I've updated your Fiddle code. Please see this, it will solve your problem.
Here is the snippet:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox() {       
$("input:checkbox").change(function() {                 
selectedCB = [];        
notSelectedCB = [];
selectedValue = $(this).attr("value");                
CountSelectedCB.length = 0;
if (selectedValue === "Others" && $(this).is(":checked")) {
uncheckAllCheckBox();
$(this).prop('checked', true);
CountSelectedCB.push(selectedValue);
} else {
$("input:checkbox").each(function() {
if ($(this).attr("value") === "Others")
$(this).prop('checked', false);
if ($(this).is(":checked")) {
CountSelectedCB.push($(this).attr("value"));
}
});
}                        
$('input[name=solutions]').val(CountSelectedCB).blur();    
});
}
function uncheckAllCheckBox() {
$("input:checkbox").each(function() {
$(this).prop('checked', false);
CountSelectedCB.length = 0;
});
}
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox() {       
$("input:radio").change(function() {                 
selectedRB = [];        
notSelectedRB = [];                
CountSelectedRB.length = 0;        
$("input:radio").each(function() {            
if ($(this).is(":checked")) {                
CountSelectedRB.push($(this).attr("value"));            
}        
});                
$('input[name=existing]').val(CountSelectedRB).blur();     
});
}
$('#solutions, #existing').bind('keyup blur', function() {            
$('#summary').val('You are looking for solutions in ' +                               $('#solutions').val() +                               (' \n') +                              'Are you using an existing customer? ' +                               $('#existing').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>
Updated JSFiddle Code

If I check 2 input radio the disabled Submit button enables, but if I uncheck them...the Submit button doesn't disable back

I just need a little help with this code.
var prv3;
var markIt3 = function(e) {
if (prv3 === this && this.checked) {
this.checked = false;
prv3 = null;
} else {
prv3 = this;
}
};
$(function() {
$('input.class_x').on('click', markIt3);
});
$('input[type=radio]').on('change', function() {
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
if (current.length > 1) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
}).change();
My request is the following:
can anybody just FIX what is missing in order for the form Submit button to go back to be disabled as it is supposed to be, because this form only enables it when 2 input type radio have been checked?
This form previous description is the main idea of everything:
A form, with several input type radios. Check at least 2 and the Submit button enables. But if you uncheck any of them, the Submit button should disable back, but I cannot manage to achieve this PART.
I just need a little HELP with IT, nothing else.
Please, DON'T change my code too much!Can it be done?
Check the fiddle right here: https://jsfiddle.net/Suiberu/70tkgk5t/13/
Thanks!

Actually problem is deselecting radio button not detected as a change. How about this
var prv3;
var markIt3 = function(e) {
if (prv3 === this && this.checked) {
this.checked = false;
prv3 = null;
} else {
prv3 = this;
}
checkIfValid();
};
$(function() {
$('input.class_x').on('click', markIt3);
});
function checkIfValid() {
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
if (current.length > 1) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
};
input {
display: block;
margin: 0.5em 0;
}
input[type='submit']:disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
<input class="class_x" type="radio" name="name_1" value="value_1" id="id_1" />
<input class="class_x" type="radio" name="name_2" value="value_2" id="id_2" />
<input class="class_x" type="radio" name="name_3" value="value_3" id="id_3" />
<input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/>
</form>

Or you can change the type of your inputs to checkBoxes and it will simply do the magic.
Here is the JSFiddle link.
var prv3;
var markIt3 = function (e) {
if (prv3 === this && this.checked) {
this.checked = false;
prv3 = null;
} else {
prv3 = this;
}
};
$(function () {
$('input.class_x').on('click', markIt3);
});
$('input[type=checkbox]').on('change', function () {
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled=true;
if (current.length > 1) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
}).change();
input {
display: block;
margin: 0.5em 0;
}
input[type='submit']:disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
<input class="class_x" type="checkbox" name="name_1" value="value_1" id="id_1" />
<input class="class_x" type="checkbox" name="name_2" value="value_2" id="id_2" />
<input class="class_x" type="checkbox" name="name_3" value="value_3" id="id_3" />
<input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required />
</form>
Only the type has been changed from radio button to checkbox.

this.checked = false
..does not fire the change event, so the change code doesn't get fired when a radio button is unchecked.
Add the following line of code after that line:
$(this).change();
That will fire the change code.

Try using .prop() function instead
$('input[type=radio]').on('change', function() {
var current = $('input.class_x').filter(':checked');
var $sbmtBtn = $('#SubmitButton');
$sbmtBtn.prop('disabled', true);
if (current.length > 1) {
$sbmtBtn.prop('disabled', false);
} else {
$sbmtBtn.prop('disabled', true);
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" class="class_x">
<input type="radio" class="class_x">
<input id="SubmitButton" type="submit">
</form>
.prop() documentation

How to checked checkbox main when sub checkbox not checked?

How to checked checkbox main when sub checkbox not checked ?
When checkbox id="checkItem1" and id="checkItem2" and id="checkItem3" not checked,
i want to auto checked checkbox id="checkAll" how can i do that ?
http://jsfiddle.net/peap/sydzL8Lc/11/
<input type="checkbox" id="checkAll" checked > Check All
<hr />
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item3

you can do it like bellow
$('input[id^="checkItem"]').change(function(){
if($('input[id^="checkItem"]:checked').length===0)
$('#checkAll').prop('checked',true);
})
DEMO

I did a JSFiddle on the full functionality you will need including including when user click the checkAll all boxes change to checked if checkAll is checked or to not checked otherwise. Also there's a on change listener on each of them to listen if the user check all of them and to change the checkAll to checked and backwards.
HTML:
<input type="checkbox" id="checkAll"> Check All
<hr />
<div class='js-checkboxes'>
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item3
</div>
Javascript:
$('.js-checkboxes > input').on('change', function() {
var isAllChecked = true;
$('.js-checkboxes > input').each(function() {
if (!this.checked) {
isAllChecked = false;
}
});
if (isAllChecked) {
$('#checkAll')[0].checked = true;
} else {
$('#checkAll')[0].checked = false;
}
});
$('#checkAll').on('change', function() {
if (this.checked) {
$('.js-checkboxes > input').each(function() {
this.checked = true;
});
} else {
$('.js-checkboxes > input').each(function() {
this.checked = false;
});
}
});

$("input[id^='checkItem']").change(function(){
if(!$("#checkItem1").is(":checked") && !$("#checkItem2").is(":checked") && !$("#checkItem3").is(":checked"))
{
$("#checkAll").prop("checked",true)
}
}
EDIT :- DEMO

How to show an alert if all checkboxes aren't checked?

I want alert if check-box is not checked (- this is working )
and
Alert if ALL check-box is not checked ( need help in this )
CheckBox :
<input type="checkbox" value="1" id="data" name="data[]">
<input type="checkbox" value="2" id="data" name="data[]">
<input type="checkbox" value="3" id="data" name="data[]">
Button :
<input name=\"submitclose\" type=\"submit\" value=\"Close\" id=\"submitclose\">
Below is my Jquery :
echo "<script>
jQuery(function($) {
$(\"input[id='submitclose']\").click(function() {
var count_checked = $(\"[id='data']:checked\").length;
if (count_checked == 0) {
alert(\"Please select a Packet(s) to Close.\");
return false;
} else{
return confirm(\"Are you sure you want to Close these Packet?\");
}
});
});
</script>";

Try,
HTML:
<input type="checkbox" value="1" id="data1" name="data[]">
<input type="checkbox" value="2" id="data2" name="data[]">
<input type="checkbox" value="3" id="data3" name="data[]">
JS:
var allCheckBox = $("[id^='data']")
var count_checked = allCheckBox.filter(":checked").length;
if (count_checked == 0) {
alert("All check boxes are not checked");
} else if(count_checked != allCheckBox.length) {
alert("some of the check boxs are not checked");
} else{
return confirm("Are you sure you want to Close these Packet?");
}

$(\"input[id='submitclose']\").click(function(){
var count = 0;
$('input#data').each(function(){
if ($(this).attr('checked') == true){
count++ //if a checkbox is checked the variable count will be greater then 0.
}
})
if (count == 0){ //nothing is checked.
alert("Please check at least one of the checkboxes");
}else{ //something is checked.
//code to execute.
}
})

We Keep Coding

JavaScript is the programming language of the Web.

Enable Disable Button if any of checkbox is checked - javascript

Give a id to delete button. Lets say if the id is delete - $("input[type=checkbox]").on("change", function(){ if ($("input[type=checkbox]:checked").length > 0) { $("#delete").removeAttr('disabled','disabled'); } else { $("#delete").attr('disabled','disabled'); } });

try this var checkedSize = $('input:checked').size() $(':input:button[value=Delete]').attr("disabled",checkedSize === 0);

Related

Call javascript function when specific radio become unselected

Uncheck all checkboxes if "Other" checkbox is checked and get value

If I check 2 input radio the disabled Submit button enables, but if I uncheck them...the Submit button doesn't disable back

How to checked checkbox main when sub checkbox not checked?

How to show an alert if all checkboxes aren't checked?

Categories

Resources