onchange disable textarea php

這是我的表單，如果選擇city2選項，我需要禁用textarea，如果選擇了其他選項，則啓用textarea。onchange disable textarea php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
var citySelect = document.getElementById('city'), 
    descriptionTextarea = document.getElementById('description'); 

citySelect.addEventListener('change', function() { 
    descriptionTextarea.disabled = citySelect.selectedIndex == 1; 
}, false); 
</script> 
</head> 
<body> 
<form method="post" name="areaform" id="areaform"> 
<select name="city" id="city"> 
<option value="city1">city1</option> 
<option value="city2">city2</option> 
<option value="city3">city3</option> 
</select><br /> 
<br /> 

<textarea name="description" id="description" cols="" rows="" style="width:150px; height:50px;"></textarea> 
</form> 
</body> 
</html>

我該怎麼做？

來源

2012-03-17 designersvsoft

如果數值指標進行比較是好的...

var citySelect = document.getElementById('city'), 
    descriptionTextarea = document.getElementById('description'); 

citySelect.addEventListener('change', function() { 
    descriptionTextarea.disabled = citySelect.selectedIndex == 1; 
}, false);

jsFiddle。

如果你寧願比較每個選項的value屬性...

var citySelect = document.getElementById('city'), 
    descriptionTextarea = document.getElementById('description'); 

citySelect.addEventListener('change', function() { 
    descriptionTextarea.disabled = citySelect.options[citySelect.selectedIndex].value == 'city2'; 
}, false);

jsFiddle。

還要注意< IE9不支持addEventListener()，只是attachEvent()。您需要定義兩者或使用助手功能。

如果你最終使用jQuery，它可以更簡潔...

var descriptionTextarea = $('#description'); 
$('#city').change(function() { 
    descriptionTextarea.prop('disabled', $(this).val() == 'city2'); 
});

jsFiddle。

來源

2012-03-17 10:27:02 alex

請參閱我的更新問題。即使在Mozilla中它也不適用於我。我無法追蹤爲什麼？ – designersvsoft 2012-03-17 10:42:45

@designersvsoft查看小提琴。它表明它正在工作，並且應該很容易適應你的代碼。 – alex 2012-03-17 10:43:16

隨着jQuery你可以這樣做：

$.ready(function() { 
    $('#city').on('change', function() { 
    if ($('#city').val() == 'city2') 
    { 
     $('#description').attr('disabled', 'disabled'); 
    } else { 
     $('#description').attr('disabled', ''); 
    } 
    }); 
});

來源

2012-03-17 10:27:33 Justin808

雖然可以用jQuery來實現，但OP沒有提到它。 – alex 2012-03-17 10:44:06

@alex - 真，但它也不排除。 jQuery *是* javascript。 – Justin808 2012-03-17 11:06:04

儘管你很難添加jQuery來實現這一功能。 – alex 2012-03-17 11:07:49

使用JavaScript函數

<form method="post" name="areaform" id="areaform"> 
<select name="city" id="city" onchange="checkCity();"> 
<option value="city1">city1</option> 
<option value="city2">city2</option> 
<option value="city3">city3</option> 
</select><br /> 
<br /> 

<textarea name="description" id="description" cols="" rows="" style="width:150px; height:50px;"></textarea> 
</form> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
function checkCity() { 
    ct = $("#city option:selected").val(); 
    if(ct=="city2") { 
     document.getElementById("description").disabled=true; 
    }else{ 
     document.getElementById("description").disabled=false; 
    } 
} 
</script>

來源

2012-03-17 10:31:15 nithi

問題中沒有提及jQuery。 – alex 2012-03-17 10:43:38

onchange disable textarea php

回答

相關問題