Javascript（jQuery）/ HTML：將<input>或<select>設置爲啓用，不起作用？

Question

我目前使用Mozilla Firefox 14.0.1和Google Chrome 20.0.1132.57（最新的我認爲）。

我的代碼是這樣的：http://jsfiddle.net/SVtDj/

這是我希望發生的事情：

1. 上輸入1

2. 輸入一些單擊禁用輸入（觸發的onchange功能...請參閱jQuery）

   注意：在輸入input1上的內容後，我們單擊禁用的輸入，沒有別的。

3. 現在應該啓用禁用的輸入。由於通過單擊禁用的輸入，它應該觸發input1的onchange函數。

這適用於谷歌瀏覽器，但它不適用於Mozilla Firefox。如何點擊被禁用的元素不會觸發輸入的onchange函數？這也適用於點擊禁用而不是禁用

Answer 1

Disabled輸入不會在FireFox上觸發change和click事件。

$('li:eq(1)').click(function(e){ 
    if($.trim($('#input1').val()).length != 0){ 
     $('#input2').prop('disabled', false); 
    } 
}); 

http://jsfiddle.net/SVtDj/10/

，而不是trim()你可以使用jQuery $.trim()函數，它是跨瀏覽器：

$('#input1').change(function(){ 
    if($.trim($(this).val()).length != 0){ 
     $('#input2').prop('disabled', false); 
    } 
}); 

demo

Answer 2

你的代碼是正確的。問題是.change（）在觸發前需要失去焦點（模糊）。試着改變它.keyup（）

http://jsfiddle.net/SVtDj/6/

補充：這可能是如果你想切換你所追求的

$('#input1').keyup(function(){ 
    $('#input2').prop('disabled', $(this).val().trim().length == 0); 
});​ 

Answer 3

延長Ramison's answer

效果傷殘#input2你可以簡單：

$('#input1').change(function(){ 
    var isDisabled = !$.trim($(this).val()).length; 
    $('#input2').prop('disabled', isDisabled); 
}); 

而且演示：http://jsfiddle.net/SVtDj/7/

Answer 4

的問題是Firefox的需要你輸入「ENTER」鍵或做其他事所以在輸入1鑄就「的onchange」事件中，我認爲有寫的焦點後輸入1鬆動。也許this question鏈接到你的，它讓我嘗試以下與Firefox的作​​品。（我沒有嘗試在其他瀏覽器）

$('#input1').bind('input',function(){ 
    if($(this).val().trim().length != 0){ 
    $('#input2').removeAttr('disabled'); 
    } 
});​ 

Answer 5

這是因爲在FF，當輸入被禁用它真的是禁用（它不接收鼠標點擊）。

單擊您禁用的元素不會在input1上產生模糊事件（焦點丟失），因此onchange不會被觸發。

你可以用一些類和jQuery輕鬆解決這個問題。例如：

<input class=disabled id=input2> 

一些CSS：

.disabled { background: #888; } 

然後......

$(function(){ 
    // disable keypresses on "disabled" input 
    $('.disabled').keypress(function(e){ 
    e.preventDefault; 
    e.stopPropagation; 
    return false; 
    }); 
    // doesn't allow to focus 
    $('.disabled').focus(function(e){ 
    $(this).blur(); 
    }); 
}); 

激活 「禁用」 元素：

$('#input2').removeClass('disabled'); 

檢查在這裏：http://jsfiddle.net/SVtDj/11/

Answer 6

查看@Andy E在這篇文章Jquery event on a disabled input的回答，我認爲這是解決您的問題的最佳解決方案。