jquery - wie man entsprechende Checkbox, sich gegenseitig ausschließende

Question

ich eine Checkbox-Liste haben wie diese

Jetzt will ich das machen, wenn Sponge's segment1 als Spooky's segment's segment1 ausgewählt werden ausgewählte de werden

<div class="col-md-6" style="height:80%;margin-top:-10px;" > 
     <h3>user1</h3> 
     <hr style="margin:0px"> 
     {%for segment in segments[0]["segment"]%} 
     {%if segment.id|string in check_boxes_segment%} 
     <h5 style="padding:5px">{{segments[0]["worker"]}}'s segment{{ loop.index }}&nbsp<label><input type="checkbox" checked class="segment_checkbox" data-segmentid = "{{segment.id}}"></label></h5> 
     {%else%} 
     <h5 style="padding:5px">{{segments[0]["worker"]}}'s segment{{ loop.index }}&nbsp<label><input type="checkbox" class="segment_checkbox" data-segmentid = "{{segment.id}}"></label></h5> 
     {%endif%} 
     {% endfor %} 
     </div> 
     <div class="col-md-6" style="height:80%;margin-top:-10px;"> 
     <h3>user2</h3> 
     <hr style="margin:0px"> 

     {%for segment in segments[1]["segment"]%} 
     {%if segment.id|string in check_boxes_segment%} 
     <h5 style="padding:5px">{{segments[1]["worker"]}}'s segment{{ loop.index }}&nbsp<label><input type="checkbox" checked class="segment_checkbox" data-segmentid = "{{segment.id}}"></label></h5> 
     {%else%} 
     <h5 style="padding:5px">{{segments[1]["worker"]}}'s segment{{ loop.index }}&nbsp<label><input type="checkbox" class="segment_checkbox" data-segmentid = "{{segment.id}}"></label></h5> 
     {%endif%} 
     {% endfor %} 
     </div> 

Was ist der effiziente und intelligente Art und Weise, dies zu tun?

Answer 1

Verwenden Radiobuttons mit dem gleichen Namen pro Zeile, Stil als Kontrollkästchen

label span { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid #aaa; 
 
    border-radius: 3px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 20xp; 
 
} 
 

 
label input { 
 
    display: none; 
 
} 
 

 
label input:checked + span:before { 
 
    content: '✔'; 
 
    display: inline-block; 
 
    font-size: 14px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <label> 
 
     <input type="radio" name="name[0]"/> 
 
     <span></span> 
 
     </label> 
 
    </td> 
 
    <td> 
 
     <label> 
 
     <input type="radio" name="name[0]"/> 
 
     <span></span> 
 
     </label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <label> 
 
     <input type="radio" name="name[1]"/> 
 
     <span></span> 
 
     </label> 
 
    </td> 
 
    <td> 
 
     <label> 
 
     <input type="radio" name="name[1]"/> 
 
     <span></span> 
 
     </label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <label> 
 
     <input type="radio" name="name[2]"/> 
 
     <span></span> 
 
     </label> 
 
    </td> 
 
    <td> 
 
     <label> 
 
     <input type="radio" name="name[2]"/> 
 
     <span></span> 
 
     </label> 
 
    </td> 
 
    </tr> 
 
</table>