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

时间:2014-10-10 05:34:04

标签: javascript php

  <?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
    }
    ?>

我的问题是如何禁用所有复选框,该复选框不等于第一个复选框的截止日期

示例

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

如果我检查invoice_no 1,则将禁用invoice_no 3和4 如果我取消选中invoice_no 1,则将启用所有check_box

截至目前我只有这个并且不知道接下来要做什么,我搜索网络但我仍然无法找到如何做到这一点

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

TIA的帮助.....

2 个答案:

答案 0 :(得分:1)

你可以试试这个:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
    $('input[type=checkbox]').change(function(){
        var chk = $(this).attr('rel');
        if($(this).is(':checked'))
        {
            $('input[type=checkbox]').each(function(){

                        var chks = $(this).attr('rel');
                        if(chk != chks)
                        {
                           $(this).attr('disabled','true'); 
                        }
                });
         }
        else
        {
            var temp ='';
            $('input[type=checkbox]').each(function(){                    
                    if($(this).is(':checked'))
                    {
                        temp = $(this).attr('rel');                               
                        return false;                                
                    }                       
            });

            $('input[type=checkbox]').each(function(){                    

                    if(temp != chk)
                    {
                        $(this).removeAttr('disabled');                            
                    }                       
            });
        }
});

</script>

答案 1 :(得分:0)

查看此代码..

&#13;
&#13;
$(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);
            });
        }
	}
});
});
&#13;
<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">
&#13;
&#13;
&#13;

这将有效..:)