COLDFUSION：在表循环中为td（行）选择一个复选框

Question

在下面的代码中，我遍历一个表。所需行有两个复选框。检查完第一个框后，我想阻止用户检查该行中的另一个框。如果用户检查第二个，他/她应该能够检查其他方框（选项）。

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

<div class="container">
	<div class="row">	
		<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>		
				<th class="mtc">Participation</th>
				<th class="mtc">Support</th>			
			</tr>	
			<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>	
			</cfoutput>		
		</table>
		</div>
	</div>
	</form>		
</div>
</div>	

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">	
    <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>		
          <th class="mtc">Participation</th>
          <th class="mtc">Support</th>			
        </tr>	
        <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>	
        </cfoutput>		
      </table>
    </div>
  </div>
  </form>		
</div>
</div>