2011-12-24 76 views
0

我有一個問題,並搜索了一會兒,但沒有得到任何靈魂。要禁用頁面加載jquery上的選擇性複選框

我有一個頁面,如:

<!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函數,但沒有得到想要的結果。如果能回答這個問題,我會非常有幫助的。感謝提前。

回答

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/

還包括</table>在HTML代碼中

+0

謝謝兄弟,非常感謝你。 – 2011-12-25 08:03:11

+0

你是受歡迎的朋友......如果它幫助你解決你的問題,你應該將答案標記爲接受。 – 2011-12-25 13:57:34

+0

Sry,之前做過...我沒有這樣做,我只能標記爲正確的答案。 – 2011-12-25 15:43:01

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++; 
} 
+0

謝謝您的回答,我使用python/Django的在後端,這一次我需要它是建立在Django的管理部分來實現。我想我不能改變它從後端... – 2011-12-25 08:06:40

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"); 
    } 

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

這是一個比通過對象循環清潔執行

你可以參考使用自定義數據從這裏屬性,例如

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/