При выборе флажка отключить специальные флажки

Question

У меня есть таблица флажков, при выборе определенного флажка мне нужно отключить определенные флажки. Я могу сделать это с помощью jquery, но у меня возникают проблемы с различием флажков, присутствующих в моей таблице.

Вот мой код:

<table id="mytb" class="table table-hover table-condensed"> 
     <thead> 
      <tr> 
       <th style="width: 25%;">Column 1</th> 
       <th style="width: 25%">Column 2</th> 
       <th style="width: 25%">Column 3</th> 
       <th style="width: 25%">Column 4</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Row 1</td> 
       <td class="vcenter"><input type="checkbox" id="row1" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row1" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row1" value="3"/></td> 
      </tr> 
      <tr> 
       <td>Row 2</td> 
       <td class="vcenter"><input type="checkbox" id="row2" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row2" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row2" value="3"/></td> 
      </tr> 
      <tr> 
       <td>Row 3</td> 
       <td class="vcenter"><input type="checkbox" id="row3" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row3" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row3" value="3"/></td> 
      </tr> 
<tr> 
       <td>Row 4</td> 
       <td class="vcenter"><input type="checkbox" id="row4" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row4" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row4" value="3"/></td> 
      </tr> 
<tr> 
       <td>Row 5</td> 
       <td class="vcenter"><input type="checkbox" id="row5" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row5" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row5" value="3"/></td> 
      </tr> 
<tr> 
       <td>Row 6</td> 
       <td class="vcenter"><input type="checkbox" id="row6" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row6" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id=row6" value="3"/></td> 
      </tr> 
     </tbody> 
    </table> 

Так вот мои условия:

1. Если я флажок с идентификатором = значение "Row1" = "3", мне нужно отключить все другие флажки.

2. Если я выберу флажок из любой другой строки, то есть строки 2,3,4,5 или 6, где значение = 3, тогда мне нужно отключить все остальные флажки в той же строке (где связаны значения 1 и 2).

3. Если я выберу флажок из любой другой строки, то есть строки 2,3,4,5 или 6, где значение = 2, тогда мне нужно отключить этот флажок в той же строке, где значение = 1.

Answer 1

Пожалуйста, добавьте следующий код в JQuery выше, в функции изменения, где другие, если заявления являются:

if(this.id=='row1' && this.value=='1') { 
    if($(this).is(':checked')) { 
     $('#new_user_form *').filter(':checkbox').each(function(){ 
      if(this.id=='row1' && this.value=='1') { 
      } else { 
       $(this).attr("disabled",true); 
      } 
     }); 
    } else { 
     $('#new_user_form *').filter(':checkbox').each(function(){ 
      if(this.id=='row1' && this.value=='1') { 
      } else { 
       $(this).attr("disabled",false); 
      } 
     }); 
    } 
} 
if(this.id=='row1' && this.value=='2') { 
    if($(this).is(':checked')) { 
     $('#new_user_form *').filter(':checkbox').each(function(){ 
      if(this.id=='row1' && this.value=='2') { 
      } else { 
       $(this).attr("disabled",true); 
      } 
     }); 
    } else { 
     $('#new_user_form *').filter(':checkbox').each(function(){ 
      if(this.id=='row1' && this.value=='2') { 
      } else { 
       $(this).attr("disabled",false); 
      } 
     }); 
    } 
} 

Answer 2

код Jquery:

$('#chkPersonalDetails').click(function() { 
     var checkedStatus = this.checked; 
     $('span[rel=pe]').find('input').attr("checked", checkedStatus); 
    }); 

ASPX код.

<asp:CheckBox ID="chkPersonalDetails" runat="server" Text="Personal Details" 
    rel="pe"/> 
    <asp:CheckBox ID="chkSearchAddress" runat="server" Text="Address" 
     rel="pe"/> 
    <asp:CheckBox ID="chkSearchPhone" runat="server" Text="Phone" 
     rel="pe"/> 
     <asp:CheckBox ID="chkSearchSex" runat="server" Text="Sex" rel="pe"/> 

Так что я делаю, выбирая все флажки, которые имеют атрибут отн как отн = предварительно я проверяю или отключив на основе первого флажка.

Соответственно, используйте этот код согласно вашему требованию. Надеюсь, ты меня понял !!

Cheers !!

Answer 3

Посмотрите на это: http://api.jquery.com/multiple-attribute-selector/.

Попытка без проверки фактического флажка ID, но на основе позиции DOM является:

$(":checkbox").on('click', function(e){ 
    var originatingCheckbox = this; 
    var siblings =$(originatingCheckbox).parentUntil('tr').find(":checkbox"); 
    siblings.each(function(e){ 
     if(originatingCheckbox != this) 
     { 
     if(originatingCheckbox.checked){ 
      this.checked = false; 
      $(this).attr("disabled", true); 
     }else{ 
      $(this).removeAttr("disabled"); 
     } 
     } 
    }); 
}); 

Однако HTML-документ должен иметь элементы с уникальными идентификаторами, используйте имя вместо этого, имени атрибут может быть повторен.

Вы также можете использовать document.getElementsByName('row1'), который вернет массив элементов, соответствующих этому имени. Вы можете сделать простой цикл, чтобы проверить, какое значение у каждого есть, и если они проверены.

Answer 4

Привет пожалуйста, найти испытано и проверено код следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
    $(document).ready(function() { 
     $('#new_user_form *').filter(':checkbox').change(function() { 
      if(this.id=='row1' && this.value=='3' && $(this).is(':checked')) { 
       $('#new_user_form *').filter(':checkbox').each(function(){ 
        if(this.id=='row1' && this.value=='3') { 
        } else { 
         $(this).attr("checked",false); 
        } 
       }); 
      } 
      if((this.id=='row2' || this.id=='row3' || this.id=='row4' || this.id=='row5' || this.id=='row6') && this.value=='3') { 
       var checkedId = this.id; 
       var checkedOrNot = $(this).is(':checked'); 
       $('#new_user_form *').filter(':checkbox').each(function(){ 
        if(this.id==checkedId && (this.value=='1' || this.value=='2')) { 
         if(checkedOrNot) { 
          $(this).attr("disabled",true); 
         } else { 
          $(this).attr("disabled",false); 
         } 
        } 
       }); 
      } 
      if((this.id=='row2' || this.id=='row3' || this.id=='row4' || this.id=='row5' || this.id=='row6') && this.value=='2') { 
       var checkedId = this.id; 
       var checkedOrNot = $(this).is(':checked'); 
       $('#new_user_form *').filter(':checkbox').each(function(){ 
        if(this.id==checkedId && this.value=='1') { 
         if(checkedOrNot) { 
          $(this).attr("disabled",true); 
         } else { 
          $(this).attr("disabled",false); 
         } 
        } 
       }); 
      } 
     }); 
    }); 
</script> 
</head> 

<body> 
<form id="new_user_form"> 
<table id="mytb" class="table table-hover table-condensed"> 
     <thead> 
      <tr> 
       <th style="width: 25%;">Column 1</th> 
       <th style="width: 25%">Column 2</th> 
       <th style="width: 25%">Column 3</th> 
       <th style="width: 25%">Column 4</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Row 1</td> 
       <td class="vcenter"><input type="checkbox" id="row1" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row1" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row1" value="3"/></td> 
      </tr> 
      <tr> 
       <td>Row 2</td> 
       <td class="vcenter"><input type="checkbox" id="row2" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row2" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row2" value="3"/></td> 
      </tr> 
      <tr> 
       <td>Row 3</td> 
       <td class="vcenter"><input type="checkbox" id="row3" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row3" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row3" value="3"/></td> 
      </tr> 
<tr> 
       <td>Row 4</td> 
       <td class="vcenter"><input type="checkbox" id="row4" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row4" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row4" value="3"/></td> 
      </tr> 
<tr> 
       <td>Row 5</td> 
       <td class="vcenter"><input type="checkbox" id="row5" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row5" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row5" value="3"/></td> 
      </tr> 
<tr> 
       <td>Row 6</td> 
       <td class="vcenter"><input type="checkbox" id="row6" value="1"/></td> 
     <td class="vcenter"><input type="checkbox" id="row6" value="2"/></td> 
     <td class="vcenter"><input type="checkbox" id="row6" value="3"/></td> 
      </tr> 
     </tbody> 
    </table> 
</form> 
</body> 
</html> 

Copy Paste и наслаждайтесь :) веселит