Make button enabled if checkboxes are checked in ASP.NET mvc - asp.net-mvc

Question

In my project I have created a few checkboxes in a for loop:
for(int i=0; i<10; i++)
{
{<input type="checkbox" name="check"/> #i<br>}
}
I also have a button called "Delete" which is supposed to delete the selected items:
<input type="button" id="DelButton" disabled value="Delete" />
For now the button will always be disabled, but I would like to know how it can become enabled if one or more checkboxes become checked.

Answer 1

Though you don't explicitly mention the use of jQuery, it does come with ASP.NET MVC by default. So here goes...
First, respond to the change event for the checkboxes:
$('input[type="checkbox"]').change(function() {
// respond to change
});
This would be invoked any time any checkbox on the page changes its state. Then within this event handler all you want to know is if any checkbox is checked, right? For that you can just select all checked ones and see if there are any. Something like this:
if ($('input[type="checkbox"]:checked').length > 0) {
// at least one is checked
}
Then in your if/else structure you just want to enable/disable the button. That would look something like this:
$('#DelButton').prop('disabled', false);
Putting it all together, you might have something like this:
$('input[type="checkbox"]').change(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('#DelButton').prop('disabled', false);
} else {
$('#DelButton').prop('disabled', true);
}
});
Example

Answer 2

You can do that of JQuery code like this:
$('.checkbox_class').change(function() {
if ($('.checkbox_class:checked').length > 0) {
$('#DelButton').prop('disabled', false);
} else {
$('#DelButton').prop('disabled', true);
}
});
Html code :
<input type="checkbox" class="checkbox_class" />
<input type="checkbox" class="checkbox_class" />
<input type="button" id="DelButton" disabled value="Delete" />
I hope to help you.
Live Demo here : http://jsfiddle.net/CdwpA/1656/

Answer 3

You have to initiate an event
Something like :
<input type="submit" name="DelButton" class="inputButton" id="DelButton" value=" DelButton" />
<input type="checkbox" onchange="document.getElementById('DelButton').disabled = !this.checked;" />