啓用/禁用基於單選按鈕的功能按鈕

當頁面加載一個帶有單選按鈕的表時會顯示。在表格3下方的按鈕X，Y，Z被禁用。當用戶從表格中選擇一個單選按鈕時，這三個按鈕X，Y，Z應該被啓用？啓用/禁用基於單選按鈕的功能按鈕

2011-06-15 riya

我不清楚你在問什麼。你問是否應該啓用按鈕，或者如何啓用它們？ – kinakuta 2011-06-15 22:12:58

使用Javascript：

$('table input[type="radio"]').click(function() { 
    $('input[type="button"]').removeAttr('disabled'); 
});

HTML：

<table> 
    <tr> 
     <td><input type="radio" />... 
... 

<input type="button" disabled ... />

來源

2011-06-15 22:14:16

爲了OP的好處，他們應該考慮使用ID選擇器或CSS選擇器，以便在單擊任何單選按鈕時，頁面上的每個按鈕都不會啓用。 – 2011-06-15 23:30:04

這個答案會爲所有raido按鈕增加一個onclick監聽器，包括禁用的按鈕，這看起來不合適。爲了對單選按鈕進行分組，它們必須共享一個通用名稱（在示例中省略），因此按名稱選擇它們更有意義。如果沒有選擇單選按鈕（這不應該被允許發生，但許多網頁忽略了良好的設計原則），那麼X，Y和Z按鈕應該被再次禁用似乎也是合理的。如果有人被禁用，他們可能也應該被取消選中。 – RobG 2011-06-15 23:42:07

甲聽者可以連接到該表和單選按鈕組可以通過名稱來引用。當表格中的單選按鈕上發生點擊事件時，可以根據特定組中的任何按鈕是否被選中來啓用或禁用X，Y和Z按鈕。該邏輯需要允許表單重置的情況，例如

<form> 
    <table id="table0" style="border: 1px solid black;"> 
    <tr> 
     <td><input type="radio" name="group1"> 
     <td><input type="radio" name="group1"> 
     <td><input type="radio" name="group1"> 
    <tr> 
     <td><input type="reset"> 
     <td> 
     <td> 
    </table> 
    <label for="r2-0">X&nbsp;<input type="radio" name="group2" id="r2-0" value="x"></label> 
    <label for="r2-1">Y&nbsp;<input type="radio" name="group2" id="r2-1" value="y"></label> 
    <label for="r2-2">Z&nbsp;<input type="radio" name="group2" id="r2-2" value="z"></label> 
</form> 

<script type="text/javascript"> 
function enableButtons() { 
    var buttons1 = document.getElementsByName('group1'); 
    var buttons2 = document.getElementsByName('group2'); 
    var checkedState = false; 

    // Check if any buttons in group 1 have been checked 
    for (var i=0, iLen=buttons1.length; i<iLen; i++) { 
    if (buttons1[i].checked) { 
     checkedState = true; 
     break; 
    } 
    } 

    // Enable or disable group 2 buttons based on above result 
    // When disabling, also uncheck any that are checked 
    for (var j=0, jLen=buttons2.length; j<jLen; j++) { 
    if (!checkedState) { 
     buttons2[j].checked = false; 
     buttons2[j].disabled = true; 
    } else { 
     buttons2[j].disabled = false; 
    } 
    } 
} 

window.onload = function() { 

    // Disable X, Y & Z buttons 
    var buttons = document.getElementsByName('group2'); 
    for (var i=0, iLen=buttons.length; i<iLen; i++) { 
    buttons[i].disabled = true; 
    } 

    // Add onlick listener to table 
    var table = document.getElementById('table0'); 
    if (table) table.onclick = function() { 
    window.setTimeout(enableButtons, 1); 
    } 
} 

</script>

來源

2011-06-16 00:07:07 RobG

啓用/禁用基於單選按鈕的功能按鈕

回答

相關問題