启用按钮的简单javascript函数？答案

【问题标题】：Simple javascript function to enable a button?启用按钮的简单javascript函数？
【发布时间】：2011-08-24 01:37:11
【问题描述】：

不幸的是，我对 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>

【问题讨论】：

标签： php javascript html forms button

【解决方案1】：

最简单的解决方案是将onchange 事件处理程序添加到select 元素。例如（假设您的元素在 form 中）：

<select onchange="this.form['processor_details'].disabled = false;" ...(rest of code)

【讨论】：

【解决方案2】：

我建议jQuery 以获得最佳浏览器支持（以及易于编码）：

$(function() {
   $('.custom-pc').change(function() {
     $(this).next('input').removeAttr('disabled');
  });
});

【讨论】：

【解决方案3】：

你可以这样使用

<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>

【讨论】：

【解决方案4】：

未经测试，但我想这应该可以工作。

// 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;
};

【讨论】：

【解决方案5】：

您需要在选择框中放置一个函数 onChange 事件。

<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;
}

谢谢。

【讨论】：

OK..我改好了..现在OK.?

【解决方案6】：

如果没有 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 会有所帮助，尤其是this chapter。

我确实建议学习 jQuery。它会让你的生活轻松 1000 倍，也会让你对你选择的性别更具吸引力。

【讨论】：

【解决方案7】：

试试这个（使用 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);
    }      
});

DEMO

【讨论】：

【解决方案8】：

使用 jQuery

采取类似的方式

$( ".custom-pc" ) . change(function(){
  if ( selid( "#idselect" ) )
  {
    $( "#button" )  . attr ( "enabled", "enabled"  ); 
  } 
})

selid - 函数，显示所选元素的 id。 function selid(name) //获取选择元素的选定id，否则为false { 变量 ID = 假； $("#"+name+" option:selected").each(function () { id = $(this).val() ; }); 返回标识； };

抱歉，或许可以改写更有效。

PS。另外 - 在 SO 问题中混合 PHP 和 JS 并不是一个好主意 :) 我确定 :)

【讨论】：