我希望使用https://github.com/cosmicwheels/jquery-checkradios之類的東西來設置Bootstrap Table中的單選按鈕或複選框。然而，我不明白如何做到這一點，因爲實際相應的輸入標籤是由JavaScript代碼（bootstrap-table.js）中的連接操作創建的。是否有任何規定可以將CSS類提供給Bootstrap表中的樣式單選按鈕？如何設置引導表中的單選按鈕或複選框的樣式？
下面是Bootstrap Table中的樣式化單選按鈕的示例。如果這是首選選項，您可以輕鬆刪除JS片段以及一些CSS，使單選按鈕成爲唯一可點擊元素。
字體真棒用於單選按鈕，所以一定要包括它。
input[type=radio] {
display: none;
}
label {
cursor: pointer;
}
input[type=radio] + label:before {
font-family:'FontAwesome';
display: inline-block;
}
input[type=radio] + label:before {
content:"\f10c";
color: #f00;
cursor: pointer;
}
input[type=radio] + label:before {
letter-spacing: 10px;
}
input[type=radio]:checked + label:before {
content:"\f111";
color: #fff; /* Remove this if you remove the 3 Last Rules of the CSS */
}
片段
/* Delete the JS Below to Remove the Hover Effect and to Make the Buttons + Label the only Active Area */
$('.table tr').click(function(event) {
if (event.target.type !== 'radio') {
$(':radio', this).trigger('click');
}
});
$(":radio[name=radios]").change(function() {
$(".table tr.active").removeClass("active");
$(this).closest("tr").addClass("active");
});.wrapper {
margin-top: 40px;
}
.table-striped {
background-color: rgba(77, 162, 179, 0.35);
color: #4DA2B3;
}
.table-responsive {
border-color: transparent;
font-size: 20px;
cursor: pointer;
/* Remove this if you remove the 3 Last Rules Rules of the CSS */
}
.table tbody tr td {
line-height: 24px;
padding-top: 12px;
}
input[type=radio] {
display: none;
}
label {
cursor: pointer;
}
input[type=radio] + label:before {
font-family: 'FontAwesome';
display: inline-block;
font-size: 20px;
font-weight: 200;
}
input[type=radio] + label:before {
content: "\f10c";
/* The Open Circle Can be replaced with another Font Awesome Icon */
color: #4DA2B3;
cursor: pointer;
}
input[type=radio] + label:before {
letter-spacing: 10px;
}
input[type=radio]:checked + label:before {
content: "\f05d";
/* Replace with f111 for a Solid Circle (or any other Font Awesome Icon */
color: #fff;
/* Remove this if you remove the 3 Last Rules of the CSS */
}
/* Delete the Rules Below (and 2 above with Comments) to Remove the Hover Effect and to Make the Buttons + Label the only Active Area */
.table tbody tr:hover td {
background-color: rgba(77, 162, 179, 0.55);
color: #fff;
border-bottom: 10px solid rgba(7, 101, 120, 0.85);
}
.table tbody tr.active td {
background-color: rgba(77, 162, 179, 0.55);
color: #fff;
}
.table tbody tr.active td label {
color: #fff;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<div class="container">
<div class="table-responsive col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<table class="table table-striped">
<tbody>
<tr>
<td>Series A</td>
<td>Product A</td>
<td>
<input type="radio" name="radios" id="radio1" />
<label for="radio1">Yes</label>
</td>
</tr>
<tr>
<td>Series B</td>
<td>Product B</td>
<td>
<input type="radio" name="radios" id="radio2" />
<label for="radio2">No</label>
</td>
</tr>
<tr>
<td>Series C</td>
<td>Product C</td>
<td>
<input type="radio" name="radios" id="radio3" />
<label for="radio3">Maybe</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
是的，我知道，整個行可以以這種方式來選擇。參見例如數據單元式，數據行式，數據格式化器，類/數據類。 DOM也可以在事件處理程序中操作。但是，我的問題是特定於複選框或單選按鈕的樣式。我看到他們的屬性可以使用data-formatter選項來操作：https：//github.com/wenzhixin/bootstrap-table-examples/blob/master/options/disabled-checkbox.html。但是，有關造型的想法？他們似乎並沒有在渲染完成後簡單地添加一個類。 – Prashant