COLDFUSION：在表循環中爲td（行）選擇一個複選框

Question

在下面的代碼中，我遍歷一個表。有兩個複選框用於所需的行。一旦選中第一個框，我想阻止用戶檢查該行中的其他框。如果用戶檢查第二個，他/他應該能夠檢查其他盒子（選項）。

<cfquery name="data" datasource="#dbMarks#"> 
 
SELECT helix_date, Helix_Title 
 
FROM Helix_Events 
 
</cfquery> 
 

 
<div class="container"> 
 
\t <div class="row"> \t 
 
\t \t <form action="save.cfm"> 
 
\t \t <div class="col-sm-12 col-md-8"> 
 
\t \t \t <h2>Select Helix Programme</h2> 
 
\t \t </div> 
 
\t \t <div class="col-sm-12 col-md-4 mtr mtop"> 
 
\t \t \t <select name="" id="" class="btn-markham"> 
 
\t \t \t \t <option value="">Semester 1</option> 
 
\t \t \t \t <option value="">Semester 2</option> 
 
\t \t \t </select> 
 
\t \t \t <button class="btn-markham" onclick="myFunction()"><span class="fa fa-print"></span>&nbsp;Print</button> 
 
\t \t \t <input type="submit" class="btn-markham2" value="Save"> 
 
\t \t \t <br></br> 
 
\t \t </div> 
 

 
\t \t <div class="col-md-12"> 
 
\t \t <table class="table"> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>Date</th> 
 
\t \t \t \t <th>Event</th> \t \t 
 
\t \t \t \t <th class="mtc">Participation</th> 
 
\t \t \t \t <th class="mtc">Support</th> \t \t \t 
 
\t \t \t </tr> \t 
 
\t \t \t <cfoutput query="data" > 
 
\t \t \t <tr> 
 
\t \t \t \t <td>#dateformat(helix_date,"dd-mmm-yy")#</td> 
 
\t \t \t \t <td>#helix_title#</td> 
 
\t \t \t \t <td class="mtc"><input type="checkbox" name="check" value="1"> </td> 
 
\t \t \t \t <td class="mtc"><input type="checkbox" name="check2" value="2"></td> 
 
\t \t \t </tr> \t 
 
\t \t \t </cfoutput> \t \t 
 
\t \t </table> 
 
\t \t </div> 
 
\t </div> 
 
\t </form> \t \t 
 
</div> 
 
</div> \t

Answer 1

請使用此代碼行。 jQuery(this).closest('tr').find('[type=checkbox]').not(this).prop('disabled', true);這使得在檢查當前複選框時禁用下一個複選框。您可以使用同樣的方法取消禁用的複選框jQuery(this).closest('tr').find('[type=checkbox]').not(this).prop('disabled', false);

請檢查以下代碼段以獲取更多理解。

$("input[type='checkbox']").on('change',function(){ 
 
    if($(this).is(':checked')){  
 
    jQuery(this).closest('tr').find('[type=checkbox]').not(this).prop('disabled', true); 
 
    }else{ 
 
    jQuery(this).closest('tr').find('[type=checkbox]').not(this).prop('disabled', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<cfquery name="data" datasource="#dbMarks#"> 
 
    SELECT helix_date, Helix_Title 
 
    FROM Helix_Events 
 
</cfquery> 
 

 
<div class="container"> 
 
    <div class="row"> \t 
 
    <form action="save.cfm"> 
 
     <div class="col-sm-12 col-md-8"> 
 
     <h2>Select Helix Programme</h2> 
 
     </div> 
 
     <div class="col-sm-12 col-md-4 mtr mtop"> 
 
     <select name="" id="" class="btn-markham"> 
 
      <option value="">Semester 1</option> 
 
      <option value="">Semester 2</option> 
 
     </select> 
 
     <button class="btn-markham" onclick="myFunction()"><span class="fa fa-print"></span>&nbsp;Print</button> 
 
     <input type="submit" class="btn-markham2" value="Save"> 
 
     <br></br> 
 
     </div> 
 

 
    <div class="col-md-12"> 
 
     <table class="table"> 
 
     <tr> 
 
      <th>Date</th> 
 
      <th>Event</th> \t \t 
 
      <th class="mtc">Participation</th> 
 
      <th class="mtc">Support</th> \t \t \t 
 
     </tr> \t 
 
     <cfoutput query="data" > 
 
      <tr> 
 
      <td>#dateformat(helix_date,"dd-mmm-yy")#</td> 
 
      <td>#helix_title#</td> 
 
      <td class="mtc"><input type="checkbox" name="check" value="1"> </td> 
 
      <td class="mtc"><input type="checkbox" name="check2" value="2"></td> 
 
      </tr> \t 
 
     </cfoutput> \t \t 
 
     </table> 
 
    </div> 
 
    </div> 
 
    </form> \t \t 
 
</div> 
 
</div>