DatatableでAjaxレスポンスからチェックボックスをチェックする方法

Question

dataCompetenceの値が2,5のajax応答コードがあります。私は同じIDを列comp_idに見つけようとして、チェックボックスにチェックを入れました。ここに私のhtmlコードは次のとおりです。

<table id="competence_list" class="table table-striped table-bordered table-hover"> 
    <thead> 
    <tr>         
     <th width="1%"><input name="select_all_competence" class="case" id="example-select-all-competence" type="checkbox"></th> 
     <th hidden>ID</th> 
     <th width="10%">Aspect</th> 
     <th width="40%">Description</th> 
    </tr> 
</thead> 
<tbody>   
    <?php 
    $i = 1; 
    if ($this->competenceList) { 
    foreach ($this->competenceList as $data) { 
    ?> 
    <tr>           
     <td><input type="checkbox" name="idcheckbox_competence" id="idcheckbox_competence" class="case"></td> 
     <td hidden id="comp_id"><?php echo $data['competence_id']; ?></td> 
     <td><?php echo $data['aspect']; ?></td> 
     <td><?php echo $data['descriptions']; ?></td> 
    </tr> 
    <?php 
    $i++; 
    } 
    } 
    ?> 
    </tbody> 
</table> 

と私がチェックし、チェックボックスを設定しようとしたものを、この：

var dataCompetence = jsonData.dataCompetence; 
if(jsonData.success){      
     $.gritter.removeAll(); 
     $.each(dataCompetence.split(","), function(i,e){ 
     $("#competence_list input[value='" + e + "']").prop("checked", true); 
     }); 

私は同じ値を見つけるために、OWを知っているし、その後にチェック]チェックボックスを設定していない、私を助けて。おかげ

Answer 1

@Nikeがしようとすると次の手順に従ってください

.......

Htmlの

<div id="dvCheckBoxListControl"></div> 

のjQuery

<script> 
$(document).ready(function() { 
    PopulateCheckBoxList(); 
}) 

function PopulateCheckBoxList() { 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("GetCheckBoxDetails", "Home")', 
     contentType: "application/json; charset=utf-8", 
     data: "{}", 
     dataType: "json", 
     success: AjaxSucceeded, 
     //error: AjaxFailed 
    }); 
} 

function AjaxSucceeded(result) { 
    BindCheckBoxList(result); 
} 
function BindCheckBoxList(result) { 
    CreateCheckBoxList(result); 
} 

function CreateCheckBoxList(checkboxlistItems) { 
    var table = $('<table></table>'); 
    var counter = 0; 
    $(checkboxlistItems).each(function() { 
     table.append($('<tr></tr>').append($('<td></td>').append($('<input>').attr({ 
      type: 'checkbox', name: 'chklistitem', value: this.Value, id: 'chklistitem' + counter, checked:this.IsSelected 
     })).append(
     $('<label>').attr({ 
      for: 'chklistitem' + counter++ 
     }).text(this.Name)))); 
    }); 

    $('#dvCheckBoxListControl').append(table); 
} 

モデルCheckBoxItem内を作成してくださいこのようなあなたのプロジェクト..

モデル

public class CheckBoxItem 
{ 
    public string Name { get; set; } 
    public string Value { get; set; } 
    public bool IsSelected { get; set; } 
} 

コントローラ

[HttpPost] 
    public ActionResult GetCheckBoxDetails() 
    { 
     List<CheckBoxItem> chkListAppointments = new List<CheckBoxItem>(){ 

      new CheckBoxItem{ Value="1",Name="Jaipur", IsSelected=true}, 
      new CheckBoxItem{ Value="2",Name="Ajmer",IsSelected=false}, 
      new CheckBoxItem{ Value="3",Name="Sikar",IsSelected=true}, 
     }; 
     return Json(chkListAppointments, JsonRequestBehavior.AllowGet); 
    }