不幸的是,我对JavaScript一无所知,所以请原谅我问这样一个业余问题。
我有一个带有选择框的表单,每个选项旁边都有一个按钮。我已经禁用了该按钮,并且我希望当用户在复选框中选择某些内容时启用该按钮。
这就是我目前用于生产选择框和禁用按钮的功能。
<td style="width:125px;"><strong>Processor:</strong></td>
<td style="width:420px;">
<select class="custom-pc" name="processor">
<option value=""></option>
<?php
$processor_query = @mysql_query("SELECT * FROM custom_pc_processor");
while ($p_q = mysql_fetch_array($processor_query)) {
$id = $p_q['id'];
$name = $p_q['name'];
echo '<option value="'.$id.'">'.$name.'</option>';
}
?>
</select>
<input name="processor_details" type="button" value="Details" disabled="disabled" />
</td>
最简单的解决方案是将onchange
事件处理程序添加到select
元素。例如(假设您的元素在form
中):
<select onchange="this.form['processor_details'].disabled = false;" ...(rest of code)
我建议jQuery获得最佳浏览器支持(以及易于编码):
$(function() {
$('.custom-pc').change(function() {
$(this).next('input').removeAttr('disabled');
});
});
你可以这样使用
<td style="width:125px;"><strong>Processor:</strong></td>
<td style="width:420px;">
<select class="custom-pc" id="processor" name="processor" onChange='UpdateButton()">
<option value=""></option>
<?php
$processor_query = @mysql_query("SELECT * FROM custom_pc_processor");
while ($p_q = mysql_fetch_array($processor_query)) {
$id = $p_q['id'];
$name = $p_q['name'];
echo '<option value="'.$id.'">'.$name.'</option>';
}
?>
</select>
<input id="processor_details" name="processor_details" type="button" value="Details" disabled="disabled" />
</td>
。
<
script>
function UpdateButton()
{
var bDisable;
if (document.getElementById ("processor").value == '') // change the condition if required.
bDisable = true;
else
bDisable = false;
document.getElementById ("processor_details").disabled = bDisable;
}
</script>
未经测试,但在我的头顶上,这应该可以工作。
// Give your form a name, I'm using myform.
// Add an event to the onchange of the <select>
document.myform.processor.onchange = function() {
// Enable the button
document.myform.processor_details.disabled = false;
};
您需要在选择框中放置一个函数更改事件。
<select class="custom-pc" name="processor" onChange="return getEnable(this.form);">
<option value=""></option>
<?php
$processor_query = @mysql_query("SELECT * FROM custom_pc_processor");
while ($p_q = mysql_fetch_array($processor_query)) {
$id = $p_q['id'];
$name = $p_q['name'];
echo '<option value="'.$id.'">'.$name.'</option>';
}
?>
</select>
Javascript 函数如下所示。
function getEnable(frm){
frm.processor_details.disabled = false;
return true;
}
谢谢。
如果没有 jQuery,HTML BODY 底部的以下代码块就足够了。
<script type="text/javascript">
var ddl = document.getElementsByName('processor')[0];
ddl.onchange = function () {
document.getElementsByName('processor_details')[0].disabled = !this.value;
};
</script>
如果你打算在你的职业生涯中做大量的Web开发,你真的需要学习JavaScript和DOM。 W3Schools会有所帮助,尤其是这一章。
不过,我确实建议学习jQuery。它会让你的生活轻松1000倍,也会让你对你选择的性别更有吸引力。
试试这个(使用 jQuery v 1.6 )
$('select').change(function() {
var op =$(this).val();
if(op !=''){
$('input[name="processor_details"]').prop('disabled',false);
}else{
$('input[name="processor_details"]').prop('disabled', true);
}
});
演示
- 使用 jQuery
-
拿一些类似的东西
$( ".custom-pc" ) . change(function(){ if ( selid( "#idselect" ) ) { $( "#button" ) . attr ( "enabled", "enabled" ); } })
selid - 函数,显示所选元素的 ID。函数 selid( name )//get select element 的选定 id,或假{ 变量 ID = 假; $("#"+name+" option:selected").each(function () { id = $(this).val() ; }); 返回 ID;};
抱歉,也许可以重写以更有效。
附言。另外 - 混合PHP和JS,在SO问题中,不是很好:)我确定:)