切換禁用的屬性，並在jQuery中同時顯示/隱藏

我試圖在需要顯示和隱藏某些內容並禁用未在視圖中的輸入的多部分窗體上使用jQuery.Validate。基本上，如果用戶單擊按鈕切換附加輸入，則它將顯示以便他們可以輸入數據。但直到它顯示我需要保持禁用，以便jquery.validate將忽略它。到目前爲止，我找到了一個簡單的腳本來切換禁用的屬性，我可以根據需要顯示/隱藏輸入，但我需要它們一起工作。是否有一種簡單的方法可以在切換屬性時顯示/隱藏輸入？切換禁用的屬性，並在jQuery中同時顯示/隱藏

這裏是一個小提琴，顯示我有什麼，現在和它的作品，但我必須點擊#toggleDisabled按鈕，在第一時間兩次：

JS Fiddle

這裏是我使用的功能邏輯：

(function($) { 
    $.fn.toggleDisabled = function() { 
    return this.each(function() { 
     var $this = $(this); 
     if ($this.attr('disabled')) $this.removeAttr('disabled').show(); 
     else $this.attr('disabled', 'disabled').hide(); 
    }); 
}; 
})(jQuery); 

$(function() { 
$('#toggleButton').click(function() { 
    $('#toggleInput').toggleDisabled(); 
    }); 
});

這裏是簡單的HTML：

<form id="myform"> 
<input type="text" name="field1" /> <br/> 
<br />  <input type="text" id="toggleInput" name="toggleInputName" style="display:none" /> 
<input type="button" id="toggleButton" value="Toggle Disabled" /> 
<input type="submit" /> 
</form>

來源

2014-02-20 isaac weathers

使用.prop()而不是.attr()

$.fn.toggleDisabled = function() { 
    return this.each(function() { 
     var $this = $(this); 
     if ($this.prop('disabled')) { 
      $this.prop('disabled', false).show(); 
     } else { 
      $this.prop('disabled', true).hide(); 
     } 
    }); 
};

DEMO，您可以嘗試較短的形式here

還通過.prop() vs .attr()

來源

2014-02-20 04:26:20 Satpal

這一工程去，但它像我有它已經在那裏我有打＃ toggleButton按鈕兩次以使其工作。第一次初始化後，它的工作，但第一次失敗。任何想法爲什麼？ –

@isaacweathers，請參閱http://jsfiddle.net/G7jDK/5/我已將「禁用」屬性添加到輸入文本。它也是第一次工作。當'disabled'屬性沒有被定義時，問題#toggleInput沒有被禁用，所以當你點擊它時禁用#toggleInput並且隱藏已經隱藏#toggleInput因此它看起來不起作用 – Satpal

That's tight !!!謝謝。給你贏了@Satpal –

切換禁用的屬性，並在jQuery中同時顯示/隱藏

回答

相關問題