[英]Jquery - Hide Radio buttons - But Make the image clickable to show a bigger image
[英]How to hide or show buttons depends on clickable radio
我剛剛創建了4個按鈕(添加,編輯,刪除,取消)和一個包含來自ajax的數據的表。
每行包含一個收音機(名稱:myRadio)。
單擊單選按鈕時,按鈕應根據數據字段(名稱:狀態)的值更改其狀態(隱藏或顯示)。 需要您的幫助。
$(document).ready(function() { $('data-field:idxRadio[name=myRadio]').change(function(row, value, index) { if (row.status === 'working') { $("#addBtn").show(); $("#delBtn").hide(); } else if (row.status === 'finished') { $("#delBtn").show(); $("#addBtn").hide(); } else {} }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card-body"> <div id="toolbar"> <button type="button" id="addBtn" class="btn btn-sm btn-success" onclick="add()">Add</button> <button type="button" id="editBtn" class="btn btn-sm btn-primary" onclick="edit()">Edit</button> <button type="button" id="delBtn" class="btn btn-sm btn-secondary" onclick="del()">Delete</button> <button type="button" id="canBtn" class="btn btn-sm btn-secondary" onclick="buttonSelection()">Cancel</button> </div> <table id="table"> <tr> <th data-field="idxRadio" name="myRadio" data-valign="middle" data-align="center" data-radio="true"></th> <th data-field="id" data-align="center" data-valign="middle" data-sortable="true" data-cell-style="cellStyle">No</th> <th data-field="keyPriority" data-align="center" data-valign="middle" data-sortable="true" data-formatter="linkFormat" data-cell-style="cellStyle">priority</th> <th data-field="endTime" data-align="center" data-valign="middle" data-sortable="true" data-formatter="timeFormat" data-cell-style="cellStyle">time</th> <th data-field="title" data-align="center" data-valign="middle" data-sortable="true" data-cell-style="cellStyle">title</th> <th data-field="status" data-align="center" data-valign="middle" data-sortable="true" data-cell-style="cellStyle">status</th> </tr> </thead> </table> </div>
一個從ajax接收數據的表。
然后,由於行是動態添加到DOM的,因此需要使用事件委托on()
,然后在使用.closest()
單擊單選按鈕時需要獲取父行tr
,然后從最后一列獲取狀態(嘗試給它一個類似於status
的類以簡化查找選擇器):
$(document).ready(function() {
$('#table tbody').on('change', ':radio', function(value, index) {
var row = $(this).closest('tr');
var status = row.find('.status').text().trim();
switch (status) {
case 'working':
$("#addBtn").show();
$("#delBtn").hide();
break;
case 'finished':
$("#delBtn").show();
$("#addBtn").hide();
break;
default:
$('#toolbar button').show()
}
});
});
這是我的工作代碼。
$(document).ready( function() {
$('#table tbody').on('change', ':radio', function(value, index) {
var obj = $('#table').bootstrapTable('getSelections')[0];
var status = obj.status;
switch (status) {
case 'wait':
$("#addBtn").show();
$("#delBtn").show();
break;
default:
$('#addBtn').show()
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.