使用JQuery設置名為“required”的屬性和任何值都不起作用

Question

這不起作用：

$("#elementId").attr("required", "true");

在Chrome和Firefox中，DOM都會生成required屬性（無值）或required="" （空值）。

並且這個例子中的值是“真”並不重要。 如果你嘗試“asdf”同樣的事情發生。

奇怪的是，我相信這曾經發揮作用，因為這個新代碼是一個持續了好幾年的大型項目的一部分。

我唯一能想到的是我的Chrome（v10）和Firefox（v4）現在都已經足夠先進，他們將所需屬性識別為HTML5保留關鍵字。 我添加了novalidate屬性，認為這可能會關閉任何與表單相關的HTML5。 沒有這樣的運氣。

思考？

編輯：

為了澄清，這只發生在JQuery上。 如果我這樣說，它有效：

$("#elementId")[0].setAttribute("required", "true");

JQuery中有錯誤嗎？ 知道為什么這只發生在JQuery上嗎？ 我們的開發團隊喜歡所有代碼，盡可能通過JQuery。 我可以使用直接的setAttribute JavaScript方法，但寧可使用可行的JQuery解決方案。

編輯2：

問題的症結在於......

為什么在常規setAttribute()方法中使用JQuery的attr() setAttribute()方法不起作用？ attr()方法是否在某些時候調低setAttribute() ？

這就是令人困惑的事情。 如果你使用setAttribute（），Chrome和Firefox是完美的設置required="true" 。

Answer 1

您可以使用prop來實現此目的：

$("#elementId").prop("required", true);

相應文檔： http ： //jquery.com/upgrade-guide/1.9/#attr-versus-prop-

Answer 2

它確實與瀏覽器有關。 我檢查了IE8，它將應用您設置的任何字符串值到必需的屬性。

由於您不需要任何值（僅必須存在該屬性），因此不會影響默認行為。 如果你濫用javascript鈎子的屬性值，這是另一回事:)

<input required>與<input required="">和<input required="honky-tonk">

由於IE8不支持html5，它就像設置一個$("input").attr("derp", "derty")屬性，所以你可以設置$("input").attr("derp", "derty")並將它分配給元素。

我的猜測是jquery對希望在XHTML嚴格語法中使用它的人使用required="" ，同時仍然符合HTML5標准。

http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

http://dev.w3.org/html5/spec/Overview.html#boolean-attribute

Answer 3

我得到這個工作的方式是實現以下好的舊javascript代替任何jQuery ：

document.getElementById("inputid").required = true;

或者，（顯然）

document.getElementById("inputid").required = false;

根據要求。

我的解決方案的來源就在這里。

我已經閱讀了jQuery API上的.attr（）和.prop（）頁面，並且似乎不支持“required”屬性 - 但我願意更正。

Answer 4

我經常使用它，我沒有發現任何問題。

$("#elementId").attr("required", "required");

注意：我試過這個，但我無法讓它工作：

$("#elementId").attr("required");

盡管現在需要的是布爾屬性，但只是添加屬性名稱（沒有值）似乎與不同瀏覽器的不同版本不兼容。 堅持我上面的原始例子你應該沒事。

Answer 5

對於所需的輸入，如果刪除屬性與將其設置為false，則效果會更好

 $('#elementId').removeAttr('required');