複選框值始終爲false ASP MVC 5

Question

我遇到問題。

無論我做什麼，我的複選框值始終爲false。

我用這個模型

public class ActEntry : BaseEntity 
{ 
    [Required] 
    public int DepartmentId { get; set; } 

    [Required] 
    [Display(Name = "Тип")] 
    public EnergyType EnergyType { get; set; } 

    [Required] 
    [Display(Name = "Имя объекта установки")] 
    public string Name { get; set; } 

    [Required] 
    [Display(Name = "Позиция")] 
    public string Postition { get; set; } 

    [Required] 
    [Display(Name = "Проектная")] 
    public bool HasDoc1 { get; set; } 

    [Required] 
    [Display(Name = "Исполнительная")] 
    public bool HasDoc2 { get; set; } 

    [Required] 
    [Display(Name = "Статус")] 
    public State State { get; set; } 

    [Display(Name = "Дата сдачи")] 
    public DateTime? DateOfCommit { get; set; } 

    [Required] 
    [Display(Name = "Акт допуска")] 
    public string Act { get; set; } 

    [Required] 
    [Display(Name = "Год акта")] 
    public int Year { get; set; } 
} 

我的形式：

<div class="modal fade" id="editRow"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h2 class="modal-title" id="modalTitle"></h2> 
     </div> 
     <div class="modal-body"> 
     <form class="form-horizontal" method="post" id="detailsForm"> 
      <input type="hidden" id="Id" name="Id"> 
      <input type="hidden" id="DepartmentId" name="DepartmentId" value="@Model.DepartmentId"> 
      <input type="hidden" id="EnergyType" name="EnergyType" value="@Model.EnergyType"> 
      <div class="form-group"> 
      <label for="Name" class="control-label col-xs-3">Имя объекта установки</label> 
      <div class="col-xs-9"> 
       <input class="form-control" id="Name" name="Name"> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="Postition" class="control-label col-xs-3">Позиция</label> 
      <div class="col-xs-9"> 
       <input type="text" class="form-control" id="Postition" name="Postition"> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="Postition" class="control-label col-xs-3">Наличие документации</label> 
      <div class="col-xs-9"> 
       <label class="checkbox-inline"> 
       <input type="checkbox" name="HasDoc1" value="true">Проектная</label> 
       <label class="checkbox-inline"> 
       <input type="checkbox" name="HasDoc2" value="true">Исполнительная</label> 
      </div> 
      </div> 

      <div class="form-group"> 
      <label for="Act" class="control-label col-xs-3">Акт допуска</label> 
      <div class="col-xs-9"> 
       <input type="text" class="form-control" id="Act" name="Act"> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="Year" class="control-label col-xs-3">Год акта</label> 
      <div class="col-xs-9"> 
       <input type="text" class="form-control" id="Year" name="Year"> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label class="control-label col-xs-3"></label> 
      <div class="col-xs-9"> 
       <button class="btn btn-primary" type="button" onclick="save()">Сохранить</button> 
      </div> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 

下面是這些複選框：

<label class="checkbox-inline"> 
    <input type="checkbox" name="HasDoc1" value="true"> 
    <input type="hidden" name="HasDoc1" value="false">Проектная</label> 
<label class="checkbox-inline"> 
    <input type="checkbox" name="HasDoc2" value="true"> 
    <input type="hidden" name="HasDoc2" value="false">Исполнительная</label> 

我的AJAX腳本：

function save() { 
    if (!$('#detailsForm').valid()) return false; 

    $.ajax({ 
    type: "POST", 
    url: "/Ajax/CreateOrUpdate/", 
    data: $('#detailsForm').serialize(), 
    success: function() { 
     $('#editRow').modal('hide'); 
     updateTable(); 
     successNoty('Успешно сохранено') 
    } 
    }); 
}; 

當我看到連載的價值觀，我注意到，HasDoc2 & HasDoc1都是假的。如果我在Chrome中檢查它們並使用$('#HasDoc1').val() & $('#HasDoc2').val()進行測試，我總是會得到錯誤信息。

當我改變他們的名字hasDoc1 & hasDoc2，突然我得到當我檢查他們想要的。我究竟做錯了什麼？

是複選框屬性在ASP MVC命名有特殊規定？ 我嘗試過使用助手，結果是一樣的。

Answer 1

您使用相同的名稱爲兩個輸入（複選框和隱藏），並與jQuery你可以使用prop("checked")得到複選框值。

val()方法返回value屬性的值，看下面的例子：

<html> 
 
    <head> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
    </head> 
 
    <body> 
 
    Click to test differents ways to get "value" of checkboxes:<br/> 
 
    <input type="checkbox" id="test1" onchange="javascript:console.log(this.checked)"/>this.checked<br/> 
 
    <input type="checkbox" id="test2" onchange="javascript:console.log($('#test2').prop('checked'))"/>$('#test2').prop('checked')<br/> 
 

 
    <input type="checkbox" id="HasDoc1" onchange="javascript:console.log(this.checked)"/>this.checked<br/> 
 
    <input type="checkbox" id="HasDoc2" onchange="javascript:console.log($('#HasDoc2').prop('checked'))"/>$('#HasDoc2').prop('checked')<br/> 
 

 
    </body> 
 
</html>

我希望它可以幫助你，再見。

Answer 2

Do not use same ID in same document, because it is against the specification.IDs should be unique.Here's a basic example:https://jsfiddle.net/dhirenpateldev/dke0s8nL/6/