CODEWITHSUNDEEP
jquerycheckbox
Yazmin
Yazmin

Reputation: 1194

Allow only one checkbox selected when certain button clicked

I have the following code:

$("input.edit_user").click(function() {
    var theCheckboxes = $("input[type='checkbox']"); 
    if (theCheckboxes.filter(":checked").length > 1)
        $(this).removeAttr("checked");
        alert( "Please selected one user at a time for editing." );
});
.
.
.
<tr>
    <td><input type="checkbox" name="user_id[]" value="1"></td>
    <td><input type="checkbox" name="user_id[]" value="2"></td>
    <td><input type="checkbox" name="user_id[]" value="3"></td>
</tr>
.
.
.
<input type="submit" name="submit" value="Edit Selected User" class="edit_user">

I'm using checkboxes, because there are other options that allow for more than one item to be selected.

However, When a user selects a checkbox for editing, I need to alert them they are only allowed to select one checkbox at a time.

I think I have the right idea with my code, but I'm going about it the wrong way, since it's not working and just continues to process the page normally.

Suggestions?

UPDATE on selected solution and why

For the viable solutions below, once I added:

$(document).ready(function() {

in my working example, they started working. I selected the answer I did, because after the above line was added, all I needed was the 

return false;

line (and correct brackets on the inner if statement) in order to stop the page from executing what remains.

Thank you all for your help solving this!

Upvotes: 0

Views: 8551

Answers (4)

Caner Akdeniz
Caner Akdeniz

Reputation: 1862

You are using wrong selectors. Here is the jquery code works for your case:

$(".edit_user").click(function () {
  var $checkboxes = $("input[type='checkbox']");
  if ($("input[type='checkbox']:checked").length > 1) {
    $("input[type='checkbox']").removeAttr("checked");
    alert("Please select one user at a time for editing.");
  }
});

Here is the working fiddle: http://jsfiddle.net/639yH/

Upvotes: 1

Skrivener
Skrivener

Reputation: 1033

Your selector is wrong. You're using $("input.edit_user"), but the inputs in your html don't have the class edit_user.

Edit:

Sorry, didn't look closely enough. Here's what you need:

$('input[type="submit"]').on('click', function() {
    var $checkBoxes = $('input[type="checkbox"]');
    var checkCount = 0;

    $checkBoxes.each(function(){ if( this.checked ) checkCount++; });

    if( checkCount > 1 ) {
        $checkBoxes.removeAttr('checked');
        alert( 'Please selected one user at a time for editing.' );
    }
});

(fiddle)

Upvotes: 1

Andrei
Andrei

Reputation: 56716

Several things here:

  1. You are not stopping click from posting data when the condition is not met. You can do so with return false; for example.
  2. if branch currently has only one line. Missing curly brackets?
  3. Checkboxes won't necessary have checked attribute. For instance they do not have such in your case. However what does changes when checkbox is clicked is the value of its checked property. This should be accessed with prop method.
  4. if does not change the scope, so $(this) refers to button, not a checkbox.

All in all, the corrected script:

$("input.edit_user").click(function() {
    var theCheckboxes = $("input[type='checkbox']"); 
    if (theCheckboxes.filter(":checked").length > 1) {
        theCheckboxes.prop("checked", false);
        alert( "Please selected one user at a time for editing." );
        return false;
    }
});

Upvotes: 1

fortegente
fortegente

Reputation: 1391

I think you have to return false:

$("input.edit_user").click(function() {
    var theCheckboxes = $("input[type='checkbox']"); 
    if (theCheckboxes.filter(":checked").length > 1) {
        $(this).removeAttr("checked");
        alert( "Please selected one user at a time for editing." );

        return false;
    }
});

Upvotes: 2

Related Questions