Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как удалить или disable'ить пункт меню? (https://javascript.ru/forum/dom-window/43326-kak-udalit-ili-disable%27-punkt-menyu.html)

ANALGIN 01.12.2013 22:57

Как удалить или disable'ить пункт меню?
 
Собсна, код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Калькулятор стоимости работ</title>
<meta http-equiv="Content-Type" content="text/html" />
      <script type="text/javascript">

     //** Функция подсчета стоимости*
      function calc() {
			var type_work = document.getElementById("type_work");
			if ( type_work.selectedIndex==9 ) { 
			document.getElementById('type_color').disabled=true; 
			} else { 
			document.getElementById('type_color').disabled=false; 
			};
			if (( type_work.selectedIndex==3 ) || ( type_work.selectedIndex==4 ) || ( type_work.selectedIndex==5 ) || ( type_work.selectedIndex==6 )) { 
			document.getElementById('type_dop').disabled=true; 
			} else { 
			document.getElementById('type_dop').disabled=false; 
			};	
			var type_dop = document.getElementById("type_dop");	
			var type_lak = document.getElementById("type_lak");		
			var result = document.getElementById("result");
			//** var type_math = document.getElementById("type_math"); *
			var type_franch = document.getElementById("type_franch");
			var type_color = document.getElementById("type_color");			
			var type_art = document.getElementById("type_art");			
			var type_straz = document.getElementById("type_straz");	
			var price = 0;
			price = parseInt(type_work.value) + parseInt(type_franch.value) + parseInt(type_color.value) + parseInt(type_art.value) + parseInt(type_straz.value) + parseInt(type_dop.value) + parseInt(type_lak.value) ; //**  + parseInt(type_math.value) //

          result.innerHTML = price;
      }
		</script> 

</head>
<body>
<div style="position:relative; text-align:center; font-family: 'Courier New', Courier, monospace; font-size: 36px;">
			<h5><b>Калькулятор:</b><br/>
				<select id="type_work" onchange="calc()">
				  <option value="0">Вид работ</option>				 
				  <option value="750" title="База, удлинение на форме, камуфлирующий гель и защита">Наращивание ногтей</option>
				  <option value="550" title="База, камуфлирующий гель, защита">Покрытие ногтей гелем</option>
				  <option value="550" title="">Коррекция(до 5 недель)</option>
				  <option value="650" title="Или коррекция после другого мастера">Коррекция(более 5 недель)</option>
				  <option value="750" title="Перехоженая, упущенная">Коррекция после другого мастера</option>
				  <option value="450" title="До 5 недель">Экспресс-коррекция</option>
				  <option value="650" title="База, удлинение на форме, прозрачный гель и защита">Экспресс-наращивание ногтей</option>
				  <option value="400" title="База, 2 слоя цвета и защита">&quot;Евростандарт&quot;</option>
				  <option value="250" title="База, два слоя цвета, защита">Покрытие ногтей гель-лаком</option>
			  </select>
				<br/>
				
				<!-- <select id="type_math" onchange="calc()">
				  <option value="0" title="">Класс материалов</option>				 
				  <option value="0" title="">Продукция медиум класса PULSAR by CNI</option>
				  <option value="150" title="">Продукция премиум класса CNI-NSP</option>
				  <option disabled title="">Продукция медиум класса IRISK, RuNail</option>
			  </select>
				<br/> -->
				<select id="type_franch" onchange="calc()">
				  <option value="0" title="">&quot;Французский маникюр&quot; не нужен</option>				 
				  <option value="50" title="Одноцветный френч">&quot;Французский маникюр&quot; простой</option>
				  <option value="100" title="Миллениум, растяжка,&quot;лунный&quot;, 2 и более цвета, радужный, &quot;литье&quot;, эффект кракелюра">&quot;Французский маникюр&quot; сложный</option>
			  </select>
				<br/>
				<select id="type_color" onchange="calc()">
				  <option value="0" title="">Покрытие цветом не требуется</option>				 
				  <option value="50" title="Покрытие всего ногтя одним цветом">Однотонное покрытие</option>
				  <option value="100" title="Покрытие всего ногтя разными цветами">Покрытие два и более цвета</option>
			  </select>
				<br/>
				<select id="type_art" onchange="calc()">
				  <option value="0" title="">Нейл-Арт (роспись, дизайн) не требуется</option>				 
				  <option value="25" title="">Нейл-Арт на 1 ногте</option>
				  <option value="50" title="">Нейл-Арт на 2 ногтях</option>
				  <option value="75" title="">Нейл-Арт на 3 ногтях</option>
				  <option value="100" title="">Нейл-Арт на 4 ногтях</option>
				  <option value="125" title="">Нейл-Арт на 5 ногтях</option>
				  <option value="150" title="">Нейл-Арт на 6 ногтях</option>
				  <option value="175" title="">Нейл-Арт на 7 ногтях</option>
				  <option value="200" title="">Нейл-Арт на 8 ногтях</option>
				  <option value="225" title="">Нейл-Арт на 9 ногтях</option>
				  <option value="250" title="">Нейл-Арт на 10 ногтях</option>
			  </select>
				<br/>
				<select id="type_straz" onchange="calc()">
				  <option value="0" title="">Стразы не нужны</option>				 
				  <option value="0" title="">1-10 страз</option>
				  <option value="50" title="">11-50 страз</option>
				  <option value="100" title="">51-100 страз</option>
				  <option value="200" title="">Более 100 страз</option>
			  </select>
				<br/>
				<select id="type_dop" onchange="calc()">
				  <option value="0" title="">Дополнительные работы не нужны</option>				 
				  <option value="200" title="">Снятие геля</option>
				  <option value="150" title="">Снятие &quot;Евростандарт&quot;</option>
				  <option value="100" title="">Снятие гель-лака</option>
			  </select>
				<br/>
				<select id="type_lak" onchange="calc()">
				  <option value="0" title="">Снимать лак не прийдется</option>				 
				  <option value="20" title="">Потребуется снятие лака</option>
			  </select>
				<br/>
      <div><strong>Стоимость работ:</strong> <span id="result">0</span> руб.</div>	
</div>

</body>
</html>

Нужно добавить 2 функции:
1:
if ((( type_work.selectedIndex==4 ) || ( type_work.selectedIndex==5 )) && (( type_franch.selectedIndex==2 ) || ( type_franch.selectedIndex==3 )) && (( type_color.selectedIndex==2 ) || ( type_color.selectedIndex==3 )) && ( ( type_art.selectedIndex==11 ) { price = price - 100  и отображается какой нибудь discount.gif
 в указанном месте }

2:
if ( type_work.selectedIndex==9 ) { пункт 3 в "type_color" становиться  <option disabled>Покрытие два и более цвета</option>}

Как бы это реализовать?

lord2kim 01.12.2013 23:13

ANALGIN, собсна ничего сверхестественного...
1:
if (( type_work.selectedIndex==4 || type_work.selectedIndex==5 ) && ( type_franch.selectedIndex==2  ||  type_franch.selectedIndex==3 ) && ( type_color.selectedIndex==2 || type_color.selectedIndex==3 ) && type_art.selectedIndex==11 ) { price = price - 100; d.getElementById("discount").style.display = "block"; } else { d.getElementById("discount").style.display = "none"; }

<img src="discount.gif" style="display: none;" id="discount"> <!-- также можно использовать visibility: в этом случае изображение будет полностью прозрачным, но место будет занимать на странице -->


2:
<script language="JavaScript">
var a = 0;
function func() {
	a = !a;
	document.getElementById("sel").options[3].disabled = a;
	if (a) document.getElementById("sel").selectedIndex = 0;
}
</script>
<select id="sel" onChange="func()">
	<option value="0">1</option>
	<option value="1">2</option>
	<option value="2">3</option>
	<option value="3">4</option>
</select>

ANALGIN 01.12.2013 23:30

Спасибо!
Завтра попробую.

ANALGIN 05.12.2013 13:57

Второй скрипт работает. Спасибо!
Добавляю первое условие - функция calc перестает считать.

ANALGIN 05.12.2013 16:57

Получилось так
<script type="text/javascript">

     //** Функция подсчета стоимости*
      function calc() {
			var type_work = document.getElementById("type_work");
			if ( type_work.selectedIndex==9 ) { 
			document.getElementById('type_color').disabled=true; 
			} else { 
			document.getElementById('type_color').disabled=false; 
			};
			if (( type_work.selectedIndex==3 ) || ( type_work.selectedIndex==4 ) || ( type_work.selectedIndex==5 ) || ( type_work.selectedIndex==6 )) { 
			document.getElementById('type_dop').disabled=true; 
			} else { 
			document.getElementById('type_dop').disabled=false; 
			};	
			var type_dop = document.getElementById("type_dop");	
			var type_lak = document.getElementById("type_lak");		
			var result = document.getElementById("result");
			//** var type_math = document.getElementById("type_math"); *
			var type_franch = document.getElementById("type_franch");
			var type_color = document.getElementById("type_color");			
			var type_art = document.getElementById("type_art");			
			var type_straz = document.getElementById("type_straz");	
			var price = 0;
			price = parseInt(type_work.value) + parseInt(type_franch.value) + parseInt(type_color.value) + parseInt(type_art.value) + parseInt(type_straz.value) + parseInt(type_dop.value) + parseInt(type_lak.value) ; //**  + parseInt(type_math.value) //
			if (( type_work.selectedIndex==4 || type_work.selectedIndex==5 ) && ( type_franch.selectedIndex==2  ||  type_franch.selectedIndex==3 ) && ( type_color.selectedIndex==2 || type_color.selectedIndex==3 ) && type_art.selectedIndex==11 ) { price = (price - 100); d.getElementById("discount").style.display = "block"; } else { d.getElementById("discount").style.display = "none"; };
          result.innerHTML = price;
      }
		</script>

В html попробовал и через img и через div - тоже не фунциклирует:
<div style="display: none;" id="discount"><img src="images/discount.png"></div>

Может я && неправильно применяю ? Или ещё где-то синтаксис нарушен?

lord2kim 05.12.2013 17:09

ANALGIN,
1) добавьте
var d = document;

или перепишите все конструкции
d.getElementById

в виде
document.getElementById


2)
<img src="images/discount.png" id="discount" style="display: none;">

ANALGIN 05.12.2013 17:22

Какулятор считает, картинка не появляется.
selectedIndex у option считается c 0 или c 1 ?

lord2kim 05.12.2013 17:26

ANALGIN,
Цитата:

Сообщение от ANALGIN (Сообщение 284770)
c 0

вы это и сами могли проверить...

ANALGIN 05.12.2013 17:29

только что )

ANALGIN 05.12.2013 17:32

if (( type_work.selectedIndex==3 || type_work.selectedIndex==4 ) && ( type_franch.selectedIndex==1  ||  type_franch.selectedIndex==2 ) && ( type_color.selectedIndex==1 || type_color.selectedIndex==2 ) && (type_art.selectedIndex==10 )) { price = (price - 100); document.getElementById("discount").style.display = "block"; } else { document.getElementById("discount").style.display = "none"; };
Заработало! Спасибо за терпение!


Часовой пояс GMT +3, время: 22:23.