以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形式驗證複選框

回答

相關問題