[英]COLDFUSION: select one checkbox for td(row) in a table loop
在下面的代碼中,我遍歷了一個表。 所需行有兩個復選框。 選中第一個框后,我想阻止用戶選中該行中的另一個框。 如果用戶選中第二個,他/她應該能夠選中其他框(選項)。
<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> 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>
請使用此代碼行。 jQuery(this).closest('tr').find('[type=checkbox]').not(this).prop('disabled', true);
這使得在檢查當前復選框時禁用下一個復選框。 同樣的方式,您可以使用jQuery(this).closest('tr').find('[type=checkbox]').not(this).prop('disabled', false);
在取消選中時刪除禁用的復選框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> 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.