禁用页面加载jQuery上的选择性复选框

Question

我有一个问题，搜索了一段时间，但没有得到任何回报。

我有一个像这样的页面：

 <!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');
                    }
    });
    });

现在我想在那里有1.0版本的tbody中，其相应的复选框应在页面加载时禁用。 我同时应用了.each函数和两个.each函数，但没有得到理想的结果。 如果可以回答这个问题，我将非常有帮助。

Answer 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>

Answer 2

试试这个： 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++;
}

Answer 3

知道了： 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");
    }

});

Answer 4

一个好的实现是使用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');
});

这比遍历对象更干净

例如，您可以从此处参考使用自定义数据属性

http://api.jquery.com/data/

以下网址提供了一个示例：

http://jsfiddle.net/LUFJw/1/

而且，如果您想使此功能更通用，也可以尝试一下。

$(document).ready(function() {
    function disableVersion(version) {
        $('input:checkbox[data-version="' + version + '"]').attr('disabled', 'disabled');
    }
    disableVersion('1.0');
});

相同的示例在这里： http : //jsfiddle.net/LUFJw/2/

禁用页面加载jQuery上的选择性复选框

问题描述

4 个解决方案

解决方案1
1 已采纳 2011-12-24 13:03:05

解决方案2
0 2011-12-24 13:00:08

解决方案3
0 2011-12-24 13:06:36

解决方案4
0 2011-12-24 13:09:50

禁用页面加载jQuery上的选择性复选框

问题描述

4 个解决方案

解决方案1 1 已采纳 2011-12-24 13:03:05

解决方案2 0 2011-12-24 13:00:08

解决方案3 0 2011-12-24 13:06:36

解决方案4 0 2011-12-24 13:09:50

解决方案1
1 已采纳 2011-12-24 13:03:05

解决方案2
0 2011-12-24 13:00:08

解决方案3
0 2011-12-24 13:06:36

解决方案4
0 2011-12-24 13:09:50