2016-12-30 8 views
1

Jqueryの使用選択したチェックボックスと同じ値のチェックボックスをすべて選択するコードがあります。また、選択されているチェックボックスと同じ行のすべてのチェックボックスが無効になります(チェックボックスはテーブル内にあります)。値に基づくチェックボックスの繰り返しの選択

これはすべて素晴らしいです。しかし、それは少し不完全であり、パズルの最後の部分は私を逃しています。無効になっている行のチェックボックスは、定義により無効になっています。ただし、無効化されたものと同じ値を持つすべてのチェックボックスも無効にされている場合は完璧です。これは、ユーザーが互換性のない項目を選択しないようにするためです(これを防ぐためのサーバー側の対策もありますが、クライアント側の方がずっときれいで使いやすいです)。

JSFiddle:20040に関連するすべてのチェックボックスがチェックされている場合https://jsfiddle.net/q9q7h1y8/

$(".chkbox").on('change', function() { 

    var currentObj = $(this); 
    var val = $(this).val(); 
    if ($(this).is(":checked")) { 

     $(":checkbox[value='" + val + "']").prop("checked", true); 
     $(this) 
      .closest("tr") 
      .find(".chkbox").attr("disabled", "disabled"); 
     $(currentObj).removeAttr("disabled"); 
     $(":checkbox[value='" + val + "']") 
      .closest("tr") 
      .find(".chkbox").attr("disabled", "disabled"); 
     $(":checkbox[value='" + val + "']").removeAttr("disabled"); 
    } else { 
     $(":checkbox[value='" + val + "']").prop("checked", false); 
     $(":checkbox[value='" + val + "']") 
      .closest("tr") 
      .find(".chkbox").removeAttr('disabled');; 

    } 

}); 

意図した機能は、例えば、jsfiddle linkに30680に関連する両方のチェックボックスを無効にします。

+0

ありがとうございました。 – Stumbler

答えて

1
$(":checkbox[value='" + val + "']") 
     .closest("tr") 
     .find(".chkbox").attr("disabled", "disabled"); 

上記のコードでは、すべてのチェックボックスが同じ行にあり、すべて無効になっています。これらのチェックボックスをループし、無効にして、同じ値を持つ他のチェックボックスをすべて選択して無効にすることをお勧めします。上記のコードを次のコードに置き換えてください:

$(":checkbox[value='" + val + "']") 
    .closest("tr").find(".chkbox").each(function(){ 
    var $this = $(this); 
    $this.attr('disabled', 'disabled'); 
    $(":checkbox[value='" + $this.val() + "']").attr('disabled', 'disabled'); 
}); 

無効な属性を削除するには、同様のことが必要です。

$(":checkbox[value='" + val + "']") 
    .closest("tr").find(".chkbox").each(function(){ 
    var $this = $(this); 
    $this.removeAttr('disabled'); 
    $(":checkbox[value='" + $this.val() + "']").removeAttr('disabled'); 
}); 

Demo

1

ここでチェックし、更新フィドルjsfiddle.net/bharatsing/q9q7h1y8/2/

を追加しましたあなたのフィドルコード内のいくつかのコード:

$(":checkbox[value='" + val + "']") 
          .closest("tr") 
          .find(".chkbox").each(function(){ 
           $(":checkbox[value='" + $(this).val() + "']").attr("disabled", "disabled"); 
          }); 
1

あなたは、あなたがその値を格納することができ、チェックボックスを変更し、それぞれの時間次のようにしてください:

$('* :input[value="value?"]').action();

関連する問題