Disable checkbox on table on load when there is specific value

Question

I want to check the table row value on page load..

Table example:

Name || Status || Set

John || Pass || [ ] (checkbox)

Chris || Fail || [ ] (checkbox)

When the status is 'Fail' I want to disable the checkbox..

Now I'm using this jQuery :

<script>
$(document).ready(function() {  

    if(getElementsByClassName('paket_ava').value=='kosong'))
    {  
        document.getElementById("checkboxx").disabled=true;
    } 
});
</script>

and this is my PHP table code :

<tr>
    <td><?php echo $paket['id_paket'];?></td>                                   
    <td><?php echo $paket['nama_paket'];?></td>     
    <td><?php echo $paket['keterangan_paket'];?></td>
    <td><?php echo $paket['harga'];?></td>
    <td><img src='<?php echo $paket['gambar_paket']?>' width='120' height='120'></td>
    <td  class="paket_ava"><?php echo $paket['ketersediaan_paket'];?></td>
    // class on the table data
    <td><?php echo $paket['status_harian_paket'];?></td>
    <td><input type="checkbox" name="chkDel[]" id="checkboxx" class="aku" value="<?=$paket["id_paket"];?>"></td>
    <?php
         echo ("<td><a href='edit_data_paket.php?id_paket=$paket[id_paket]'>Edit</a></td>");        
    ?>
</tr>

The code above is not working, but if I change to:

if(getElementsByClassId('paket_ava').value=='kosong')) 
        {  
            document.getElementById("checkboxx").disabled=true;
        } 

(of course I change the class in the table into Id)

When the page load its acting strange and the checkbox on the first data is disabled..

How to do this properly?

Answer 1

Try like below.... It will help you...

Fiddle Example: http://jsfiddle.net/68wbx/126/

Suppose your HTML Table was like below:

HTML:

<table id="datapaket" border="1">
    <tr>
        <th>Name</th><th>Status</th><th>Set</th>
    </tr>
    <tr>
        <td>John</td><td class="paket_ava">Pass</td>
        <td><input type="checkbox" name="chkDel[]" id="checkboxx" class="aku" value='sam'/></td>
     </tr>
    <tr>
        <td>Chris</td>
        <td class="paket_ava">Fail</td>
        <td><input type="checkbox" name="chkDel[]" id="checkboxx" class="aku" value='sam'/></td>
      </tr>
</table>

and try the Below Jquery :

$(document).ready(function() {      
    $('#datapaket tr').each(function() {    //Looping Every Table Row
      //Get the TD Value that have Classname ".paket_ava"
      var str = $(this).find('.paket_ava').html(); 
      if(typeof str !== 'undefined'){
        if (str.indexOf("Fail") >= 0)
        $(this).find('td:nth-child(3) input:checkbox').attr("disabled", true);
      };
    });
});

Answer 2

traverse through each element having class 'paket_ava' and do your stuff inside it. like

 $('.paket_ava').each(function(i, obj) {
// your stuff...
});

Reference : jQuery to loop through elements with the same class