Замена значения атрибута
 

Доброго времени суток!
Прошу помочь новичку с вопросами, а именно:
Есть коды:

<div class= "form-group" ng-class="{error: myForm.type.$invalid}">
            <label> ОПФ </label>
            <div>
								<select class="form-control" onChange="Selected(this)" ng-model="agent.type" placeholder="Выберите ОПФ" name="type" required/>
									<option value="ИП">ИП</option>
									<option value="ЮЛ">ЮЛ</option>
								</select>
                <span ng-show="myForm.type.$dirty && myForm.type.$invalid" class="help-inline">Выберите ОПФ</span>
            </div>
        </div>

<div class= "form-group" id="innblock" ng-class="{error: myForm.inn.$invalid}">
            <label> ИНН </label>
            <div>
                <input name="inn" id="iinn" pattern="\d+" ng-model="agent.inn" type= "text" class= "form-control" maxlength="12" placeholder="ИНН" required/>
                <span ng-show="myForm.inn.$dirty && myForm.inn.$invalid" class="help-inline">Введите ИНН</span>
            </div>
        </div>

Как заменить значение атрибута, например maxlength чтобы было 10?
Пытался через функцию:

<script type="text/javascript">
      function Selected(a) {
				var label = a.value;
				if (label=="ИП") {
					document.getElementById("iinn").maxlength="12";
				} else {
					document.getElementById("iinn").maxlength="10";
				}
			}
    </script>

А вообще идея менять значения атрибутов, включать-выключать атрибуты(required disabled) в зависимости от условия выбора из select. Это возможно?
еще пробовал так:

<script type="text/javascript">
      function Selected(a) {
				var label = a.value;
				var ell = document.querySelector("div.form-group input[name=inn]");
				if (label=="ИП") {
					ell.maxlength="12";
				} else {
					ell.maxlength="10";
				}
			}
    </script>

и никак :( :help:
возможно поменять только disabled.
Кстати, disabled влияет на required? т.е. если тег disabled, атрибут required должен выключится или нет?
У меня не выключается...

Спасибо, посмотрел, но не помогло.

<div class= "form-group" id="kppblock" style='display: block;' ng-class="{error: myForm.kpp.$invalid}">
            <label> КПП </label>
            <div>
                <input name="kpp" id="kkpp" ng-model="agent.kpp" type= "num" min="0" max="999999999" class= "form-control" placeholder="КПП" required/>
                <span ng-show="myForm.kpp.$dirty && myForm.kpp.$invalid" class="help-inline">Введите КПП</span>
            </div>
        </div>

Пробовал как в документации, а именно в функции так:

kkpp.setAttribute(maxlength, 12);

и даже так:

<script type="text/javascript">
      function Selected(a) {
				var label = a.value;
				var el = document.querySelector("div.form-group input[name=kpp]");
				var ell = document.querySelector("div.form-group input[name=inn]");
				if (label=="ИП") {
					document.getElementById("kppblock").style.display='none';
					ell.setAttribute(maxlength, 12);
					el.disabled = true;
				} else {
					document.getElementById("kppblock").style.display='block';
					ell.setAttribute(maxlength, 10);
					el.disabled = false;
				}
			}

но не срабатывает maxlength. disabled и display срабатывают. Что не правильно?
script функции надо именно в body вставлять?

elem.hasAttribute(name), elem я так понял это id?
получается можно менять атрибуты только у div?

кавычки где?

Из документации:
Но вставка кавычек не помогло, пробежал по всем вариантам:(

Это опровержение :) ?

Не понял вопроса.
Кавычки вставил, не помогло

Это диалог или монолог? Похоже на опровержение.

kzn,

<div class= "form-group" id="innblock" ng-class="{error: myForm.inn.$invalid}">
            <label> ИНН </label>
            <div>
                <input name="inn" id="iinn" pattern="\d+" ng-model="agent.inn" type= "text" class= "form-control" maxlength="12" placeholder="ИНН" required/>
                <span ng-show="myForm.inn.$dirty && myForm.inn.$invalid" class="help-inline">Введите ИНН</span>
            </div>
        </div>

<script>
    var ell = document.querySelector("div.form-group input[name=inn]");
    ell.setAttribute("maxlength", "10");
</script>

да, типа опровержения

Спасибо огромное, получилось! я не обертывал в кавычки название атрибута, невнимательность!:dance:

А required возможно удалить?
не срабатывает
пробовал так тоже:

почему вы так решили?

el.setAttribute("required", false); - так не получится, это булево свойство.

<style>
input:required {
    background: #f00;
}
</style>
<input required="" /><input type="button" value="Remove" onclick="this.previousSibling.removeAttribute('required')"/>
<br/>
<input required="" /><input type="button" value="Set Not" onclick="this.previousSibling.required=!1"/>

laimas,
забавно изменяется свойство required после removeAttribute('required') в ie, css сработает только при изменении фокуса.
можно сделать

input[required] {
    background: #f00;
}

тогда это незаметно.

Да, есть такое, но для примера и так сойдет, тут пользователей ишака наверное и не найти. )

А я обычно так поступаю, чтобы пользователь видел последствия:

input:invalid {
    
}

input:valid {
     
}

при этом при удалении свойства и ишак должен реагировать нормально.

Кажется я понял. Проверил по вашим и laimas примерам, required убирается. Значит дело в другом, буду дальше разбираться. Спасибо огромное laimas и рони за помощь!