複選框在取消選中後返回「開」值

我正在關注一個教程，您在該教程中創建了一個用於啓用禁用按鈕的複選框，而當您取消選中該複選框時，該按鈕又被禁用。問題是，當我取消選中該框時，複選框仍處於「開啓」狀態，因爲該按鈕未被禁用。該代碼適用於Chrome，但不適用於Firefox 3.6。複選框在取消選中後返回「開」值

這裏是我的代碼：

<p><input type="checkbox" id="agree" >I agree</p> 
<input id="continue" type="button" value="continue" disabled='true'> 


<script> 
     $('#agree').change(function(){ 
     var state = $(this).attr('value'); 
     if(state == 'on'){ 
     $('#continue').removeAttr('disabled'); 
     }else if(state == ''){ 
      $('#continue').attr('disabled', 'false'); 
     } 
     }); 
    </script>

來源

2011-09-01 user701510

「已禁用」屬性值不一定取值' 「真」 '或''false「'。它取值爲「禁用」（或者「」「'）或必須刪除。 – Tomalak

...雖然如果您有直接引用DOM元素，您可以說'el.disabled = true; //或錯誤'。 – nnnnnn

一個複選框的校驗值不隨.val()改變你應該使用.is('checked')像這樣：

$('#agree').change(function() { 
    var state = $(this).is(':checked'); //state = true/false depending on state 
    if (state) { //if true 
     $('#continue').removeAttr('disabled'); //remove disabled 
    } else { //else (false) 
     $('#continue').attr('disabled', 'disabled'); //add disabled (you shouldn't set it to 'false' as it WILL be disabled and it'll confuse you. 
    } 
});

下面是一個Example看到我的觀點。

來源

2011-09-01 05:36:08

從jQuery 1.6開始，您也可以使用['prop（）']（http://api.jquery.com/prop/）直接訪問DOM對象屬性，並將'disabled'設置爲'true'或'假'這樣。 – Tomalak

爲什麼我的代碼在Chrome上工作？ – user701510

也許Chrome的javascript引擎是不同的，並且理解元素的值是否被檢查，我不知道。但是，即使它在Chrome中也能正常工作，但這不是正確的解決方案，我發佈的是。 –

試試這個：

$('#agree').change(function() { 
    if($("#agree").is(":checked")) 
     $('#continue').removeAttr('disabled'); 
    else 
     $('#continue').attr('disabled', false); 
});

http://jsfiddle.net/TGQZs/1/

來源

2011-09-01 05:40:22 Ben

對於'disabled'屬性，類似'「true」或「false」的值對*無效*。 – Tomalak

@Tomalak - jQuery在後臺處理這些內容，雖然你可以使用''''，你是對的，它應該是'false'。 – Ben

我的觀點更多的是，只有在jQuery中'false'才能正常工作，從而讓人們相信它也是正確的HTML（就像你在問題中看到的那樣）。我*可能在這裏有些迂腐，但我認爲有效的HTML值應該到'attr（）'，布爾可以到'prop（）'，至少在這樣的網站上。 ;-) – Tomalak

嘗試：

$(function() { 
    $('#agree').click(function() { 
     if ($(this).is(':checked')) $('#continue').attr('disabled', false); 
     else $('#continue').attr('disabled', true); 
    }); 
});

LINK：http://jsfiddle.net/Mmm4h/

來源

2011-09-01 05:41:07

複選框在取消選中後返回「開」值

回答

相關問題