禁用具有不同日期的复选框

Question

  <?php 
    while($row = mysqli_fetch_array($result)){
  ?>
    <tr>
      <td>
          <input type="checkbox" 
                 id="<?php echo $row['invoice_id']; ?>" 
                 name="invoice_id[]" 
                 rel="<?php echo $row['due_date']; ?>" 
                 value="<?php echo $row['invoice_id'];?>">
       </td>
       <td><?php echo $row['invoice_no']; ?></td>
       <td><?php echo $row['due_date']; ?></td>
    </tr>
    <?php
    }
    ?>

my question is how to disable all check box which is not equal to due date of the first check box checked

example

invoice_no              due_date
1                       10-15-2014
2                       10-15-2014
3                       10-16-2014
4                       10-17-2014

if i checked invoice_no 1, invoice_no 3 and 4 will be disabled and if i unchecked invoice_no 1, all check_box will be enabled

as of now i only have this and don't know whats next thing to do, i search the web but still i cant find how to do this

$("input[type=checkbox]").change(function() {
    $due_date = $(this).attr("rel"); 
});

TIA for your help.....

Answer 1

Check out this code..

$(document).ready(function(){
$("input[type=checkbox]").change(function() {
    //alert($(this).attr("rel"));
    $due_date = $(this).attr("rel");
    $id = $(this).val();
    
    var $check = false;
    
    if($(this).is(':checked')){
        $("input[type=checkbox]").each(function(){
            if($(this).val()!=$id){
                if($(this).attr("rel")==$due_date){
                    $(this).prop('disabled',false);
                }else{
                    $(this).prop('disabled',true);
                }
            }
        });
    }else{
        $("input[type=checkbox]").each(function(){
            if($(this).val()!=$id & $(this).is(':checked')){
                $check = true;
            }
        });
        if(!$check){    
            $("input[type=checkbox]").each(function(){
               $(this).prop('disabled',false);
            });
        }
    }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" 
                 id="1" 
                 name="invoice_id[]" 
                 rel="10-15-2014" 
                 value="1">
        <input type="checkbox" 
                 id="2" 
                 name="invoice_id[]" 
                 rel="10-15-2014" 
                 value="2">
        <input type="checkbox" 
                 id="3" 
                 name="invoice_id[]" 
                 rel="10-16-2014" 
                 value="3">
        <input type="checkbox" 
                 id="4" 
                 name="invoice_id[]" 
                 rel="10-17-2014" 
                 value="4">

This will work.. :)

</div>