غیر فعال کردن inputها با انتخاب یکی از گزینه های select در javascripts

این تاپیک 5 پاسخ و 2 مشارکت کننده دارد . آخرین آپدیت توسط :  hamid7n ،‏ 2 هفته و 1 روز پیش .

این تاپیک تاکنون 129 بازدید داشته است .

نویسنده پست
چهار شنبه ، 23 نوامبر 2016     3:09 ب.ظ #


امیر امانی

Subscriber
2 پست2 تاپیک

با سلام،
من یک فرم طراحی کردم که داخلش یک تگ select با 3 تا option داره.مثل کد پایین:
<select>
<option value="color1">Blue</option>
<option value="color2">Green</option>
<option value="color3">Red</option>
</select>
<label>Blue</label><input type="text"/>
<label>Green</label><input type="text"/>
<label>Red</label><input type="text"/>
حالا میخام به عنوان مثال گزینه آبی که انتخاب شد input مربوط به آبی فعال بشه و inputهای سبز و قرمز

غیرفعال بشن.(هر سه تا input در اول غیرفعال اند و فقط با انتخاب یکی از گزینه ها input مربوط فعال میشه)
حالا اینو باید با جاوااسکریپت بنویسم ولی کامل مسلط نیستم و به مشکل خوردم.
لطفا اگه عین این خواسته رو بزارین و یا نمونه کد عینا شبیه این ممنون میشم.
با تشکر

0  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
پنجشنبه ، 24 نوامبر 2016     2:25 ب.ظ #


hamid7n

Subscriber
50 پست1 تاپیک

سلام

خدمت شما
<!doctype html>
<html>
<body>
<select id="mySelect" onchange="myFunction()">
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Red</option>
</select>
<label>Blue</label><input id="1" type="text"/>
<label>Green</label><input id="2" type="text"/>
<label>Red</label><input id="3" type="text"/>
</body>
<script>
var x = document.getElementById("mySelect").value;
document.getElementById(x).focus();
function myFunction(){
var x = document.getElementById("mySelect").value;
document.getElementById(x).focus();
}
</script>
</html>

2  تشکر
جمعه ، 25 نوامبر 2016     10:57 ق.ظ #


امیر امانی

Subscriber
2 پست2 تاپیک

اول اینکه ممنون از راهنماییتون و ایده جالبی بود.

اما اگه بخام دوتای دیگه غیر فعال بشن چی؟

0  تشکر
جمعه ، 25 نوامبر 2016     2:03 ب.ظ #


hamid7n

Subscriber
50 پست1 تاپیک

سلام

منظورتون از غیر فعال شدن اضافه کردن اتربیوت disabled به ورودیهای دیگست؟

1  تشکر
جمعه ، 25 نوامبر 2016     2:47 ب.ظ #


امیر امانی

Subscriber
2 پست2 تاپیک

آره، یعنی خاصیت desibled اون دوتا ورودی دیگه رو فعال کنه تا اجازه نوشتن داخل ورودی رو نداشته باشن.

0  تشکر
جمعه ، 25 نوامبر 2016     3:19 ب.ظ # پاسخ تائید شده توسط سوال کننده


hamid7n

Subscriber
50 پست1 تاپیک

<!doctype html>
<html>
<body>
<select id="mySelect" onchange="myFunction()">
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Red</option>
</select>
<label>Blue</label><input id="1" type="text" />
<label>Green</label><input id="2" type="text"/>
<label>Red</label><input id="3" type="text"/>
</body>
<script>
var x = document.getElementById("mySelect").value;
document.getElementById(x).focus();
function myFunction(){
var x = document.getElementById("mySelect").value;
if(x==1){
document.getElementById("2").setAttribute("disabled","disabled");
document.getElementById("3").setAttribute("disabled","disabled");
document.getElementById("1").removeAttribute("disabled");
}else if(x==2){
document.getElementById("1").setAttribute("disabled","disabled");
document.getElementById("3").setAttribute("disabled","disabled");
document.getElementById("2").removeAttribute("disabled");
}else{
document.getElementById("2").setAttribute("disabled","disabled");
document.getElementById("1").setAttribute("disabled","disabled");
document.getElementById("3").removeAttribute("disabled");
}
document.getElementById(x).focus();
}
</script>
</html>

2  تشکر
پست 1 تا 6 (از مجموع 6 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .