2011-10-18 7 views
0

まだjQueryセレクタと混同しています。1行の別のチェックボックスがオンまたはオフの場合、チェックボックスを無効にする

私はこのテーブルを持っている:

<table boreder="5" width="100%"> 
<tbody> 
    <tr> 
     <td width="5%"></td> 
     <td width="15%">Menu</td> 
     <td width="15%">Create</td> 
     <td width="15%">Retrieve</td> 
     <td width="15%">Update</td> 
     <td width="15%">Delete</td> 
    </tr> 
    <tr> 
     <td width="5%"><input type="checkbox" name="menu_cd[]" /></td> 
     <td width="15%">SISTEM</td> 
     <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td> 
     <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td> 
     <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td> 
     <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td> 
    </tr> 
    <tr> 
     <td width="5%"><input type="checkbox" name="menu_cd[]" /></td> 
     <td width="15%">ADMIN</td> 
     <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td> 
     <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td> 
     <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td> 
     <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td> 
    </tr> 
</tbody> 
</table> 

私は左にあるチェックボックスをチェックすると、同じ行の他のチェックボックスを有効にし、その逆も012​​と私は、このスクリプトを試してみるです:

$(document).ready(function() { 

$("input[name=menu_cd[]]").live("click", function({ 
     if(!$(this).is(":checked")){ 
      $("").attr("disabled", true); 
     }else{ 
      $("").removeAttr("disabled"); 
     }  
})); 

セレクターの記入には助けが必要です!

答えて

0

HTML:

<table width="100%" id="menu"> 
<tbody> 
    <tr> 
     <td width="5%"></td> 
     <td width="15%">Menu</td> 
     <td width="15%">Create</td> 
     <td width="15%">Retrieve</td> 
     <td width="15%">Update</td> 
     <td width="15%">Delete</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="menu_cd[]" /></td> 
     <td>SYSTEM</td> 
     <td><input type="checkbox" name="rule_tp[]" /></td> 
     <td><input type="checkbox" name="rule_tp[]" /></td> 
     <td><input type="checkbox" name="rule_tp[]" /></td> 
     <td><input type="checkbox" name="rule_tp[]" /></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="menu_cd[]" /></td> 
     <td>ADMIN</td> 
     <td><input type="checkbox" name="rule_tp[]" /></td> 
     <td><input type="checkbox" name="rule_tp[]" /></td> 
     <td><input type="checkbox" name="rule_tp[]" /></td> 
     <td><input type="checkbox" name="rule_tp[]" /></td> 
    </tr> 
</tbody> 
</table> 

JS:

$(document).ready(function() { 
    $('#menu tr').each(function() { 
     $(this).find('input[type=checkbox]:first').click(function() { 
      $(this).parents('tr') 
       .find("input[type=checkbox]:gt(0)") 
       .attr("disabled", !$(this).is(":checked")); 
     }); 
    }) 
    .find('input[type=checkbox]:gt(0)').attr("disabled", true); 
}); 

はそれを試してみてください:http://jsfiddle.net/qaKGk/10/

+0

このような場合:[I 'いくつかのコードを追加しました](http://jsfiddle.net/qaKGk/18/) –

0

まず、あなたはすべてのタグの名前を変更する必要がありますが "balbla_cd" "[]をblabla_cd"

$(document).ready(function() { 
    $("input[name=menu_cd]").live("click", function(){ 
     var o = $(this).parent().parent().children().find("input[name=rule_tp]"); 
     if ($(this).attr("checked") == "checked") { 
      $.each(o, function(){ 
       $(this).removeAttr("disabled"); 
      }); 
     } else { 
      $.each(o, function(){ 
       $(this).removeAttr("checked").attr("disabled", "disabled"); 
      }); 
     } 
    }); 
}); 


</head> 
<body> 
    <table border="5" width="100%"> 
     <tbody> 
      <tr> 
       <td width="5%"></td> 
       <td width="15%">Menu</td> 
       <td width="15%">Create</td> 
       <td width="15%">Retrieve</td> 
       <td width="15%">Update</td> 
       <td width="15%">Delete</td> 
      </tr> 
      <tr> 
       <td width="5%"><input type="checkbox" name="menu_cd" /></td> 
       <td width="15%">SISTEM</td> 
       <td width="15%"><input type="checkbox" disabled name="rule_tp" /></td> 
       <td width="15%"><input type="checkbox" disabled name="rule_tp" /></td> 
       <td width="15%"><input type="checkbox" disabled name="rule_tp" /></td> 
       <td width="15%"><input type="checkbox" disabled name="rule_tp" /></td> 
      </tr> 
      <tr> 
       <td width="5%"><input type="checkbox" name="menu_cd" /></td> 
       <td width="15%">ADMIN</td> 
       <td width="15%"><input type="checkbox" disabled name="rule_tp" /></td> 
       <td width="15%"><input type="checkbox" disabled name="rule_tp" /></td> 
       <td width="15%"><input type="checkbox" disabled name="rule_tp" /></td> 
       <td width="15%"><input type="checkbox" disabled name="rule_tp" /></td> 
      </tr> 
     </tbody> 
    </table> 
関連する問題