CODEWITHSUNDEEP
jquerycheckbox
HiDayurie Dave
HiDayurie Dave

Reputation: 1807

jQuery Set Checkbox to be Checked based on 3 conditions data

Is it possible to check checkbox based on data-id and data-tipe and data-group using jQuery on my case below:

Updated Question

success: function (jsonStr)
{
    var len = jsonStr.length;
    for(var i=0; i<len; i++)
    {
        var moduleID = jsonStr[i].moduleID;
        var moduleName = jsonStr[i].moduleName;
        var projectName = jsonStr[i].projectName;
        var groupID = jsonStr[i].groupID;
        var chk = jsonStr[i].chk;
        var chkModule = jsonStr[i].chkModule;
        var group = jsonStr[i].group;

        var tr_str = "<tr id='"+jsonStr[i].moduleID+"'>" +
            "<td>" + projectName + "</td>" +
            "<td>" + moduleName + "<input type='text' name='chkTipeInput[]' class='chkTipeInput"+jsonStr[i].moduleID+"'/></td>" +
            "<td align='center'><input type='checkbox' data-id='"+jsonStr[i].moduleID+"' data-group='"+jsonStr[i].groupID+"' data-tipe='CREATE' value='CREATE'/></td>" +
            "<td align='center'><input type='checkbox' data-id='"+jsonStr[i].moduleID+"' data-group='"+jsonStr[i].groupID+"' data-tipe='EDIT' value='EDIT'/></td>" +
            "<td align='center'><input type='checkbox' data-id='"+jsonStr[i].moduleID+"' data-group='"+jsonStr[i].groupID+"' data-tipe='VIEW' value='VIEW'/></td>" +
            "<td align='center'><input type='checkbox' data-id='"+jsonStr[i].moduleID+"' data-group='"+jsonStr[i].groupID+"' data-tipe='DELETE' value='DELETE'/></td>" +
            "</tr>";

            $('.dataShow2').show();
            $("#tData tbody").append(tr_str);
    }

    $(":checkbox").each(function() {
       $(this).prop("checked", $(this).attr("data-id") == chkModule && $(this).attr("data-tipe") == chk && $(this).attr("data-group") ==   group )
    })
})

Array for:

chk       = CREATE,EDIT,  EDIT,  VIEW
chkModule = MD0003,MD0003,MD0002,MD0002
group     = GR0001,GR0001,GR0001,GR0001

Means if :

if data-id="1" and data-tipe="create" and data-group="a" then check the checkbox

Upvotes: 0

Views: 778

Answers (3)

guradio
guradio

Reputation: 15555

//$(":checkbox").each(function() {

//$(this).prop("checked", $(this).attr("data-id") == 1 && $(this).attr("data-tipe") == "create" && $(this).attr("data-group") == "a")
//})

//var data = [1,"create","a"]//array of values

var chk = ["CREATE", "VIEW", "EDIT", "DELETE"]
var chkModule = ["MD0003", "MD0002", "MD0003", "MD0002"]
var group = ["GR0001", "GR0001", "GR0001", "GR0001"]


for (var i = 0; i < 4; i++) {
  console.log(chk[i] + " " + chkModule[i] + " " + group[i])
  $(":checkbox[data-tipe=" + chk[i] + "][data-id=" + chkModule[i] + "][data-group=" + group[i] + "]").prop("checked",true)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Nama</th>
    <th>Create</th>
    <th>Read</th>
    <th>Update</th>
    <th>Delete</th>
  </tr>
  <tr>
    <td>coba</td>
    <td><input type="checkbox" data-id="MD0003" data-tipe="CREATE" data-group="GR0001"></td>
    <td><input type="checkbox" data-id="MD0002" data-tipe="VIEW" data-group="GR0001"></td>
    <td><input type="checkbox" data-id="MD0003" data-tipe="EDIT" data-group="GR0001"></td>
    <td><input type="checkbox" data-id="MD0002" data-tipe="DELETE" data-group="GR0001"></td>
  </tr>
  <tr>
    <td>coba 2</td>
    <td><input type="checkbox" data-id="2" data-tipe="create" data-group="a"></td>
    <td><input type="checkbox" data-id="2" data-tipe="read" data-group="a"></td>
    <td><input type="checkbox" data-id="2" data-tipe="update" data-group="a"></td>
    <td><input type="checkbox" data-id="2" data-tipe="delete" data-group="a"></td>
  </tr>
  <tr>
    <td><input type="button" id="btnUpdate" value="Update" />
  </tr>
</table>

Use the condition if true then prop == check

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34178

You might use a filter

$('input[type=“checkbox”]').filter(function() {
 return $(this).data("id") == "1" && $(this).data("tipe") == "create" && $(this).data("group") == "a");
}).prop("checked",true);

Upvotes: 2

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34199

You can specify attribute and its value in selector, and then use prop for setting property value:

$("input[data-id='1'][data-tipe='create'][data-group='a']").prop("checked", true);

Demo:

$("input[data-id='1'][data-tipe='create'][data-group='a']").prop("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Nama</th>
    <th>Create</th>
    <th>Read</th>
    <th>Update</th>
    <th>Delete</th>
  </tr>
  <tr>
    <td>coba</td>
    <td><input type="checkbox" data-id="1" data-tipe="create" data-group="a"></td>
    <td><input type="checkbox" data-id="1" data-tipe="read" data-group="a"></td>
    <td><input type="checkbox" data-id="1" data-tipe="update" data-group="a"></td>
    <td><input type="checkbox" data-id="1" data-tipe="delete" data-group="a"></td>
  </tr>
  <tr>
    <td>coba 2</td>
    <td><input type="checkbox" data-id="2" data-tipe="create" data-group="a"></td>
    <td><input type="checkbox" data-id="2" data-tipe="read" data-group="a"></td>
    <td><input type="checkbox" data-id="2" data-tipe="update" data-group="a"></td>
    <td><input type="checkbox" data-id="2" data-tipe="delete" data-group="a"></td>
  </tr>
  <tr>
    <td><input type="button" id="btnUpdate" value="Update" />
  </tr>
</table>

Upvotes: 1

Related Questions