禁用页面加载jQuery上的选择性复选框
[英]To disable the selective check box on page load jquery
问题描述
I have a problem and search for this a while but , didnt get any soultion. 
我有一个问题，搜索了一段时间，但没有得到任何回报。
i have a page like: 我有一个像这样的页面：
<!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');
}
});
});
Now i want in tbody where there is version 1.0 its respective check box should get disable on page load. 现在我想在那里有1.0版本的tbody中，其相应的复选框应在页面加载时禁用。 I applied the .each function and two .each function as well but did not get the desired result. 我同时应用了.each函数和两个.each函数，但没有得到理想的结果。 I would be really very helpful if could answer this .Thanks in Advance. 如果可以回答这个问题，我将非常有帮助。
4 个解决方案
解决方案1
1 已采纳 2011-12-24 13:03:05
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');
}
});
});
fiddle : http://jsfiddle.net/R27wq/1/ 小提琴： http : //jsfiddle.net/R27wq/1/
also include </table> in your html code 在您的html代码中还包括</table>
解决方案2
0 2011-12-24 13:00:08
Try this: http://jsfiddle.net/nvn6J/ 试试这个： 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');
}
});
This works, but I believe this is best solved by disabling the options from the back end. 这是可行的，但我认为最好通过从后端禁用选项来解决。 I have no idea what your back-end code looks like or even if you're using PHP, but this is an example of what I'm talking about: 我不知道您的后端代码是什么样子，即使您使用的是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++;
}
解决方案3
0 2011-12-24 13:06:36
Got it: http://jsfiddle.net/QUVjZ/1/ 知道了： 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");
}
});
解决方案4
0 2011-12-24 13:09:50
A good implementation would be to use custom data attributes available in HTML. 一个好的实现是使用HTML中可用的自定义数据属性。
Set the data attribute to the input boxes 将数据属性设置为输入框
<input type="checkbox" class="action-select" value="119"
name="_selected_action" data-version='1.0' />
Notice a new attribute added to the checkbox data-version='1.0' 请注意，已将新属性添加到复选框data-version='1.0'
Your Table will look like the following: 您的表格如下所示：
<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>
and use the following jquery implementation on the document.ready to do it. 并在document.ready上使用以下jquery实现。
$(document).ready(function(){
$('input:checkbox[data-version="1.0"]').attr('disabled','disabled');
});
This is a cleaner implementation than looping through the objects 这比遍历对象更干净
You can refer to using custom data attributes from here for example 例如，您可以从此处参考使用自定义数据属性
http://api.jquery.com/data/ http://api.jquery.com/data/
An example of the same is available at the below URL: 以下网址提供了一个示例：
http://jsfiddle.net/LUFJw/1/ http://jsfiddle.net/LUFJw/1/
And if you would like to make this functionality more generic, you can as well try this. 而且，如果您想使此功能更通用，也可以尝试一下。
$(document).ready(function() {
function disableVersion(version) {
$('input:checkbox[data-version="' + version + '"]').attr('disabled', 'disabled');
}
disableVersion('1.0');
});
An example of the same is here : http://jsfiddle.net/LUFJw/2/ 相同的示例在这里： http : //jsfiddle.net/LUFJw/2/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.