我有一个问题并且搜索了一段时间,但是,没有得到任何灵魂。
我有一个类似的页面:
<!doctype html>
<html>
<body>
<table id='mytable'>
<tr>
<thead>
<th><input type="checkbox" id="action-toggle" /></th>
<th>Institute</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr class="row1"><td><input type="checkbox" class="action-select" value="119" name="_selected_action" /></td>
<td>ABCD Engineering College</td>
<td>1.0</td></tr>
<tr class="row1"><td><input type="checkbox" class="action-select" value="119" name="_selected_action" /></td>
<td>EFGH Engineering College</td>
<td>2.0</td></tr>
<tr class="row1"><td><input type="checkbox" class="action-select" value="119" name="_selected_action" /></td>
<td>IJKL Engineering College</td>
<td>1.0</td></tr>
</tbody>
</body>
</html>
jQuery(document).ready(function($){
jQuery("#result_list tbody tr").each(function(index,el){
val=$(el).text();
(if val=='1.0'){
$("el:contains('1.0')").closest("td").find("input.action-select").attr('disabled','disabled');
}
});
});
jQuery(document).ready(function($){
jQuery("#result_list tbody tr").each(function(index,el1){
$(el1).each(function(idex,el2){
val=$(el2).text();
(if val=='1.0'){
$("el:contains('1.0')").closest("td").find("input.action-select").attr('disabled','disabled');
}
});
});
现在我想在tbody中有版本1.0,它的相应复选框应该在页面加载时禁用。 我应用了.each函数和两个.each函数,但没有得到所需的结果。如果可以回答这个问题,我会非常乐于助人。谢谢你。
答案 0 :(得分:1)
jQuery(document).ready(function($){
jQuery("#mytable tr").each(function(){
var version=$(this).find('td:last').text();
if (version === "1.0"){
$(this).find("input[type='checkbox']").attr('disabled','disabled');
}
});
});
小提琴:http://jsfiddle.net/R27wq/1/
还在您的html代码中包含</table>
答案 1 :(得分:0)
试试这个:http://jsfiddle.net/nvn6J/
$('#mytable tbody tr').each(function() {
var row = $(this);
if($(this).find('td:last').text() == '1.0') {
$(row).find('input[name="_selected_action"]').prop('disabled', 'disabled');
}
});
这有效,但我相信通过从后端禁用选项可以最好地解决这个问题。我不知道你的后端代码是什么样的,或者即使你正在使用PHP,但这是我所说的一个例子:
$counter = 1;
foreach($colleges_array as $College) {
echo '
<tr class="row' . $counter . '">
<td><input type="checkbox" class="action-select" value="' . $College->id . '" name="_selected_action" ' . ($College->version == '1.0' ? ' disabled="disabled' : '') . ' /></td>
<td>' . $College->name . '</td>
<td>' . $College->version . '</td>
</tr>';
$counter++;
}
答案 2 :(得分:0)
知道了: http://jsfiddle.net/QUVjZ/1/
$("#mytable tr td").each(function(index, el1) {
val = $(el1).html();
if (val == '1.0') {
$(el1).parent("tr").find("td:eq(0) input[type='checkbox']").attr("disabled", "disabled");
}
});
答案 3 :(得分:0)
一个好的实现方法是使用HTML中提供的自定义数据属性。
将数据属性设置为输入框
<input type="checkbox" class="action-select" value="119"
name="_selected_action" data-version='1.0' />
请注意,复选框data-version='1.0'
您的表格如下所示:
<html>
<body>
<table id='mytable'>
<tr>
<thead>
<th><input type="checkbox" id="action-toggle"/></th>
<th>Institute</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td><input type="checkbox" class="action-select" value="119" name="_selected_action" data-version="1.0"/></td>
<td>ABCD Engineering College</td>
<td>1.0</td>
</tr>
<tr class="row1">
<td><input type="checkbox" class="action-select" value="119" name="_selected_action" data-version="2.0"/></td>
<td>EFGH Engineering College</td>
<td>2.0</td>
</tr>
<tr class="row1">
<td><input type="checkbox" class="action-select" value="119" name="_selected_action" data-version="1.0"/></td>
<td>IJKL Engineering College</td>
<td>1.0</td>
</tr>
</tbody>
</body>
</html>
并在document.ready上使用以下jquery实现来完成它。
$(document).ready(function(){
$('input:checkbox[data-version="1.0"]').attr('disabled','disabled');
});
这是一个比循环遍历对象更简洁的实现
您可以参考此处使用自定义数据属性,例如
以下网址提供了相同的示例:
如果你想让这个功能更通用,你也可以试试这个。
$(document).ready(function() {
function disableVersion(version) {
$('input:checkbox[data-version="' + version + '"]').attr('disabled', 'disabled');
}
disableVersion('1.0');
});
这方面的一个例子是:http://jsfiddle.net/LUFJw/2/