Question

在写这篇文章之前，我查看，编辑并尝试了关于这个主题的所有脚本，但它们都没有用，因为我是HTML和Javascript的新手。我也不明白出了什么问题。

我将简要解释一下：我必须通过在选择字段中选择确定的值或选项，通过输入数字类型激活Javascript。

<script language="JavaScript" type="text/javascript">
    function enableInput(){
        /*alert("works!");*/
        if (document.getElementById("roof_type").selectedIndex == "0") {
            document.getElementById("gables").disable=true;
        } else {
            document.getElementById("gables").disable=false;
        }
    }

<!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=utf-8" />
        <title>Calc the quote</title>
        <script language="JavaScript" type="text/javascript">
    	    function enableInput(){
    	    	/*alert("works!");*/
    		    if (document.getElementById("roof_type").selectedIndex == "0") {
            	    document.getElementById("gables").disable=true;
        	    } else {
               	 	document.getElementById("gables").disable=false;
                }
            }
        </script>
    </head>
    <body onLoad="enableInput();">
        <form="quote">
            <table >
                <tr>
      	            <td>
      		        <div align="center">
            	            Input the roof type: <br />
        	        </div>
                    </td>
                </tr>
                <tr>
      	            <td>
                        <div align="center">
          	                <select id="roof_type"name="roof_type" onChange="enableInput();">
                                <option value=gable_roof selected="selected">with Gables</option>
                                <option value=round_roof>Rounded</option>
                    	        <option value=flat_roof>Flat / Plain</option>
                          	</select><br />
                        </div>
                    </td>
                    <tr>
                        <td>
                            <div align="center">
          	                        input the gables'number: <br />
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <div align="center">
                                <input id="gables" name="gables" type="number" min="1"  step="1" value="1" disabled="disabled" />
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
        </body>
</html>

Answer 1

而不是手动更改disabled属性，请使用setAttribute和 removeAttribute：

function enableInput() {
    if (document.getElementById("roof_type").selectedIndex === 0) {
       document.getElementById("gables").setAttribute("disabled","disabled");
    } else {
       document.getElementById("gables").removeAttribute("disabled");
    }
}

使用下拉列表选择启用输入控件

1 个答案: