Radio tipindeki input aracılığıyla textarea aktifleştirmeye veya pasifleştirmeye yarayan javascript kodudur.
index.html
<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Radio Input İle TextArea Aktifleştir - Javascript</title>
</head>
<body>
<div id="content">
<form id="giris" action="">
<!-- Aktifleştir input radio -->
<input type="radio" id="aktiflestir-secenek"
value="Aktifleştir" onChange="TextAreaAktiflestir()">Aktifleştir<br>
<!-- Pasifleştir input radio -->
<input type="radio" id="pasiflestir-secenek"
value="Pasifleştir" onChange="TextAreaPasiflestir()">Pasifleştir<br>
<!-- TextArea Alanı -->
<textarea id="metin-alani"
cols="30"
rows="10" disabled></textarea>
</form>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
//--------------------------------------------------
//Aktifleştir
//--------------------------------------------------
function TextAreaAktiflestir() {
var deger = document.getElementById('aktiflestir-secenek');
document.getElementById('pasiflestir-secenek').checked = false;
if(deger.checked == true) {
document.getElementById("metin-alani").disabled = false;
}
}
//--------------------------------------------------
//Pasifleştir
//--------------------------------------------------
function TextAreaPasiflestir() {
var deger = document.getElementById('pasiflestir-secenek');
document.getElementById('aktiflestir-secenek').checked = false;
if(deger.checked == true) {
document.getElementById("metin-alani").disabled = true;
}
}
script.js (Açıklamalı)
//--------------------------------------------------
//id değeri verilen textarea'yı
//aktifleştiren fonksiyon.
//--------------------------------------------------
function TextAreaAktiflestir() {
//--------------------------------------------------
//İlgili elementin id değerini al.
//--------------------------------------------------
var deger = document.getElementById('aktiflestir-secenek');
//--------------------------------------------------
//İki seçenekli bir işlem yapıyoruz.
//Diğer seçeneği seçebilmek için öncesinde
//bir seçim yapılmışsa bunu temizlemek gerekiyor.
//Temizlenmesini istediğimiz elementi id değeri
//aracılığıyla tespit edip seçimini temizle.
//--------------------------------------------------
document.getElementById('pasiflestir-secenek').checked = false;
//--------------------------------------------------
//Aktifleştirme işlemini yapacak
//input radio seçilmişse işlem yap.
//--------------------------------------------------
if(deger.checked == true) {
//--------------------------------------------------
//İlgili textarea'nın disabled özelliğini
//false yaparak aktifleştirme işlemini yap.
//--------------------------------------------------
document.getElementById("metin-alani").disabled = false;
}
}
//--------------------------------------------------
//id değeri verilen textarea'yı
//pasifleştiren fonksiyon.
//--------------------------------------------------
function TextAreaPasiflestir() {
//--------------------------------------------------
//İlgili elementin id değerini al.
//--------------------------------------------------
var deger = document.getElementById('pasiflestir-secenek');
//--------------------------------------------------
//İki seçenekli bir işlem yapıyoruz.
//Diğer seçeneği seçebilmek için öncesinde
//bir seçim yapılmışsa bunu temizlemek gerekiyor.
//Temizlenmesini istediğimiz elementi id değeri
//aracılığıyla tespit edip seçimini temizle.
//--------------------------------------------------
document.getElementById('aktiflestir-secenek').checked = false;
//--------------------------------------------------
//Pasifleştirme işlemini yapacak
//input radio seçilmişse işlem yap.
//--------------------------------------------------
if(deger.checked == true) {
//--------------------------------------------------
//İlgili textarea'nın disabled özelliğini
//false yaparak pasifleştirme işlemini yap.
//--------------------------------------------------
document.getElementById("metin-alani").disabled = true;
}
}
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir