Короткая версия

element.setAttribute("required", "");    //turns required on
element.required = true;                 //turns required on through reflected attribute
jQuery(element).attr('required', '');    //turns required on
$("#elementId").attr('required', '');    //turns required on

element.removeAttribute("required");     //turns required off
element.required = false;                //turns required off through reflected attribute
jQuery(element).removeAttr('required');  //turns required off
$("#elementId").removeAttr('required');  //turns required off

if (edName.hasAttribute("required") { }  //check if required
if (edName.required) { }                 //check if required using reflected attribute

Длинная версия

После T.J. Кроудеру удалось указать отраженные свойства , я узнал, что следующий синтаксис неверен:

element.attributes["name"] = value; //bad! Overwrites the HtmlAttribute object
element.attributes.name = value;    //bad! Overwrites the HtmlAttribute object
value = element.attributes.name;    //bad! Returns the HtmlAttribute object, not its value
value = element.attributes["name"]; //bad! Returns the HtmlAttribute object, not its value

Вы должны пройти через element.getAttribute и element.setAttribute:

element.getAttribute("foo");         //correct
element.setAttribute("foo", "test"); //correct

Это связано с тем, что атрибут фактически содержит специальный объект HtmlAttribute:

element.attributes["foo"];           //returns HtmlAttribute object, not the value of the attribute
element.attributes.foo;              //returns HtmlAttribute object, not the value of the attribute

Установив значение атрибута в значение «true», вы ошибочно устанавливаете его объект String, а не объект HtmlAttribute, который он требует:

element.attributes["foo"] = "true";  //error because "true" is not a HtmlAttribute object
element.setAttribute("foo", "true"); //error because "true" is not an HtmlAttribute object

Концептуально правильная идея (выраженная на типизированном языке):

HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;

Вот почему:

• getAttribute(name)
• setAttribute(name, value)

существует. Они выполняют работу по присвоению значения объекту HtmlAttribute внутри.

Кроме того, отражается некоторый атрибут. Это означает, что вы можете получить доступ к ним более красиво из Javascript:

//Set the required attribute
//element.setAttribute("required", ""); 
element.required = true;

//Check the attribute
//if (element.getAttribute("required")) {...}
if (element.required) {...}

//Remove the required attribute
//element.removeAttribute("required");
element.required = false;

То, что вы не хотите делать, ошибочно использует коллекцию .attributes:

element.attributes.required = true;     //WRONG!
if (element.attributes.required) {...}  //WRONG!
element.attributes.required = false;    //WRONG!

Тестирование Случаи

Это привело к тестированию вокруг использования атрибута required, сравнения значений, возвращаемых атрибутом, и отраженного свойства

document.getElementById("name").required;
document.getElementById("name").getAttribute("required");

с результатами:

HTML                         .required        .getAttribute("required")
==========================   ===============  =========================
                      false (Boolean)  null (Object)
             true  (Boolean)  "" (String)
          true  (Boolean)  "" (String)
  true  (Boolean)  "required" (String)
      true  (Boolean)  "true" (String)
     true  (Boolean)  "false" (String)
         true  (Boolean)  "0" (String)

Попытка получить доступ к коллекции .attributes напрямую неверна. Он возвращает объект, который представляет атрибут DOM:

edName.attributes["required"] => [object Attr]
edName.attributes.required    => [object Attr]

Это объясняет, почему вы никогда не должны напрямую общаться с .attributes. Вы не манипулируете значениями атрибутов, а объектами, которые сами представляют атрибуты.

Как установить требуемый?

Каков правильный путь установить required на атрибут? У вас есть два варианта: либо отражение property , либо правильная установка атрибута:

element.setAttribute("required", "");         //Correct
edName.required = true;                       //Correct

Строго говоря, любое другое значение «установит» атрибут. Но определение атрибутов Boolean диктует, что он должен быть установлен только в пустую строку "", чтобы указать true . Следующие методы работают для установки атрибута required Boolean,

, но не используют их:

element.setAttribute("required", "required"); //valid, but not preferred
element.setAttribute("required", "foo");      //works, but silly
element.setAttribute("required", "true");     //Works, but don't do it, because:
element.setAttribute("required", "false");    //also sets required boolean to true
element.setAttribute("required", false);      //also sets required boolean to true
element.setAttribute("required", 0);          //also sets required boolean to true

Мы уже узнали, что попытка установить атрибут напрямую неверна:

edName.attributes["required"] = true;       //wrong
edName.attributes["required"] = "";         //wrong
edName.attributes["required"] = "required"; //wrong
edName.attributes.required = true;          //wrong
edName.attributes.required = "";            //wrong
edName.attributes.required = "required";    //wrong

Как очистить требуемый?

Трюк при попытке удалить атрибут required в том, что его легко включить случайно:

edName.removeAttribute("required");     //Correct
edName.required = false;                //Correct

С недопустимыми способами:

edName.setAttribute("required", null);    //WRONG! Actually turns required on!
edName.setAttribute("required", "");      //WRONG! Actually turns required on!
edName.setAttribute("required", "false"); //WRONG! Actually turns required on!
edName.setAttribute("required", false);   //WRONG! Actually turns required on!
edName.setAttribute("required", 0);       //WRONG! Actually turns required on!

При использовании свойства отраженного .required вы также можете использовать любые значения "falsey" выключить его и правдивые значения, чтобы включить его. Но для ясности просто придерживайтесь истины и ложности.

Как проверить для required?

Проверить наличие атрибута через .hasAttribute("required"):

if (edName.hasAttribute("required")
{
}

Вы также можете проверить это через свойство Boolean .required:

if (edName.required)
{
}