以MVC形式验证复选框

我在ASP.NET MVC2表单中有一个表。在表格的每一行都有一个复选框。桌子下面有一个提交按钮。以MVC形式验证复选框

我想在选中NONE的复选框时禁用按钮。

<% 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" />

行数/复选框的数量从1到多不等。

我怎样才能使用MVC2/jQuery要求用户在点击提交按钮之前选择最小的一个复选框？

编辑;在下面的三个答案中，我无法让他们中的任何一个人工作。点击复选框时没有任何反应，也没有引发Javascript错误。设立一个小赏金。

EDIT2;这是我最终的结果。我给了表单名称createSelectionForm，并使用了这个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'); 
      } 
     }); 
    });

来源

2010-06-04 Frode Lillerud

嘿，我固定我的答案，因为我最后一次missread你的问题，写了总BS。 :) – realshadow 2010-06-11 12:50:27

试试这个：

<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>

这太从内存写入。我没有尝试过。

来源

2010-06-04 13:14:27

我无法使这些工作。我在函数的开头添加了一个警告（“”），并且我看到它在页面加载时被调用，但是当我单击复选框时没有任何反应。该按钮从不禁用。 – 2010-06-07 09:14:30

得到它的工作 - 我没有注意到“form-id”必须被替换。 – 2010-06-12 08:21:38

这应该工作，我很抱歉，我的答案是完全错误的，我做了你想要的相反的东西。这是固定版本。

当DOM准备就绪时，它会检查表格中的所有复选框。如果至少选择其中一个，它将禁用提交按钮。当你点击其中一个复选框时，它将再次启用它，如果你将取消选中它，它将检查其他复选框，如果它们中没有一个被选中，它将禁用它。

$.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(); 
     } 
    });    
});

来源

2010-06-04 13:07:39 realshadow

这基本上不会：

添加处理的selectboxes
在处理程序中，检查有多少选择
如果0然后禁用按钮
如果!0然后启用按钮

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

来源

2010-06-04 13:11:30

只是简单的旧的基本jquery-1.4.2-min.js将工作。 – 2010-06-07 09:04:02

有这个

<!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>

来源

2010-06-11 12:14:36 Martynnw

这对我的作品一展身手：

$(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'); 
     } 
    }); 
})();

来源

2010-06-11 12:52:43

以MVC形式验证复选框

回答

相关问题