Valider les cases à cocher dans le formulaire MVC

J'ai une table dans un formulaire ASP.NET MVC2. Sur chaque ligne du tableau, il y a une case à cocher. Sous la table, il y a un bouton submit.Valider les cases à cocher dans le formulaire MVC

Je veux faire le bouton désactivé quand aucune des cases à cocher sont sélectionnées.

<% using Html.BeginForm(....) { %> 
<table> 
<% foreach (var item in Model) { %> 
    <tr> <td> 
    <input type="checkbox" name="selectedContacts" /> 
    </td></tr> 
<% } //End foreach %> 
</table> 
<% } //End using %> 

<input type="submit" value="Create selection" name="CreateSelectionAction" />

Le nombre de lignes/cases à cocher varie de 1 à plusieurs.

Comment puis-je utiliser MVC2/jQuery pour exiger que l'utilisateur minimum une case à cocher avant de cliquer sur le bouton Soumettre?

Modifier; Parmi les trois réponses ci-dessous, je n'ai pu obtenir aucun d'eux pour travailler. Rien ne se passe lorsque vous cliquez sur les cases à cocher, et aucune erreur Javascript n'est déclenchée. Mettre en place une petite prime.

EDIT2; Voici ce que j'ai fini avec. J'ai donné au formulaire le nom createSelectionForm et utilisé cette jQuery.

$(document).ready(function() { 
     $('#createSelectionForm, input[type="checkbox"]').click(function() { 
      if ($('#createSelectionForm, input[type="checkbox"]:checked').length == 0) { 
       $('input[name="CreateSelectionAction"]').attr('disabled', 'disabled'); 
      } else { 
       $('input[name="CreateSelectionAction"]').removeAttr('disabled'); 
      } 
     }); 
    });

Source

2010-06-04 Frode Lillerud

Hé, je fixe ma réponse, depuis la dernière fois que je missread votre question et écrit BS totale. :) – realshadow

Essayez ceci:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#form-id input[type="checkbox"]').change(function() { 
     if ($('#form-id input[type="checkbox"]:checked').length == 0) { 
     $('input[name="CreateSelectionAction"]').attr('disabled', 'disabled'); 
     } else { 
     $('input[name="CreateSelectionAction"]').removeAttr('disabled'); 
     } 
    }); 
    }); 
</script>

C'était trop écrit de la mémoire. Je n'ai pas essayé.

Source

2010-06-04 13:14:27

J'ai de la difficulté à les faire fonctionner. J'ai ajouté une alerte ("") au début de la fonction, et je vois qu'elle est appelée quand la page est chargée, mais rien ne se passe lorsque je clique sur les cases à cocher. Le bouton n'est jamais désactivé. –

Ça a marché - je n'ai pas remarqué que "form-id" devait être remplacé. –

Cela devrait fonctionner, je suis désolé que ma réponse était totalement faux, j'ai fait l'opposé de ce que vous vouliez. Voici la version corrigée.

Lorsque le DOM est prêt, il vérifiera toutes les cases de votre table. Si au moins l'un d'entre eux est sélectionné, il désactivera le bouton de soumission. Lorsque vous cliquez sur l'une des cases à cocher, elle l'active à nouveau et si vous la décochez, elle coche également les autres cases et si aucune n'est cochée, elle la désactivera.

$.checker = function() { 
    $('table input[type="checkbox"]').each(function() { 
     if(!$(this).is(':checked')) { 
      $('input[name="CreateSelectionAction"]').attr('disabled', 'disabled'); 
     }     
    }); 
} 

$(document).ready(function() { 
    $.checker(); 

    $('input[type="checkbox"]').click(function() { 
     if($(this).is(':checked')) { 
      $('input[name="CreateSelectionAction"]').removeAttr('disabled'); 
     } else { 
      $.checker(); 
     } 
    });    
});

Source

2010-06-04 13:07:39 realshadow

Cela fait essentiellement:

Ajouter un gestionnaire aux selectboxes
Dans le gestionnaire, vérifiez combien sont sélectionnés
Si 0 puis désactivez le bouton
Si !0 puis activer le bouton

$('input[name="selectedContacts"]').click(function() { 
    var $button = $('input#CreateSelectionAction'); 
    if($('input[name="selectedContacts"]:checked').length === 0) { 
     $button.removeAttr('disabled'); 
    } else { 
     $button.attr('disabled','disabled'); 
    } 
}

Source

2010-06-04 13:11:30

Juste l'ancien basique jquery-1.4.2-min.js fonctionnera. –

un aller à ce

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head> 
     <title>Checkbox Demo</title> 
     <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script> 
     <script src="../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <form> 
      <h1>Checkbox Demo</h1> 
      Checkbox 1: <input type="checkbox" class="validatecheckbox" /><br /> 
      Checkbox 2: <input type="checkbox" class="validatecheckbox" /><br /> 
      Checkbox 3: <input type="checkbox" class="validatecheckbox" /><br /> 
      Checkbox 4: <input type="checkbox" class="validatecheckbox" /><br /> 

      <input type="submit" value="Create selection" id="createselection" /> 
     </form> 

    <script type="text/javascript"> 
     $(document).ready(Initialize); 

     function Initialize() { 
      $(".validatecheckbox").change(Validate); 
      Validate(); 
     }; 

     function Validate() { 
      var valid = false; 

      valid = $(".validatecheckbox:checked").length > 0; 

      if (!valid) { 
       $("#createselection").attr("disabled", true); 
       return false; 
      } 
      else { 
       $("#createselection").attr("disabled", false); 
       return true; 
      } 
     } 
    </script> 
    </body> 
    </html>

Source

2010-06-11 12:14:36 Martynnw

Cela fonctionne pour moi:

$(function() { 
    if ($('table input[type="checkbox"]:checked').length == 0) { 
     $('input[type="submit"]').attr('disabled', 'disabled'); 
    } 

    $('table input[type="checkbox"]').click(function() { 
     if ($('table input[type="checkbox"]:checked').length == 0) { 
      $('input[type="submit"]').attr('disabled', 'disabled'); 
     } else { 
      $('input[type="submit"]').removeAttr('disabled'); 
     } 
    }); 
})();

Source

2010-06-11 12:52:43

Valider les cases à cocher dans le formulaire MVC

Répondre

Questions connexes