如何使用JavaScript禁用表单下拉选项

Question

I'm trying to disable the "name" text field in the form when "Choose" is selected in the drop down after the page loads (it's disabled when the page loads) ie after I've chosen one of the other two options that disable or enable that field, when I return to "Choose" i'd like the same field to disable. 我试图在页面加载后在下拉列表中选择“选择”时禁用表单中的“名称”文本字段（在页面加载时被禁用），即在我选择了其他两个选项之一之后禁用或启用该字段，当我返回“选择”时，我希望禁用同一字段。 I can't see why the javascript I've written would prevent this from happening. 我不明白为什么我编写的JavaScript可以防止这种情况的发生。 Thanks! 谢谢！

        <script type="text/javascript">

    function clickclear(thisfield, defaulttext) {
        if (thisfield.value === defaulttext) {
            thisfield.value = "";
        }
    }

    function clickrecall(thisfield, defaulttext) {
        if (thisfield.value === "") {
            thisfield.value = defaulttext;
        }
    }

    function checkPickup() {

        if (form.os0.value != "Pickup from Toowong, Brisbane" ) {
            form.name.disabled = false; form.name.style.color = '#333';

        } else {

            form.name.disabled = true; form.name.style.color = '#CCC';
            /* Reset form values */
            form.name.value = "His/her name";
        }
    }
</script>

<script type="text/javascript">
    function validate(form) {

        var errmsg = "Oops, you're required to complete the following fields! \n";

        // Various other form validations here

        // Validate "Pickup"
        if (form.os0.value === "") {
            errmsg = errmsg + " - Choose pickup or delivery\n";
        }

        // Validate "phone"
        if (form.phone.value === "" || form.phone.value === "Mobile's best!") {
            errmsg = errmsg + " - Your phone number\n";
        }


        if (form.os0.value != "Pickup from Toowong, Brisbane") {

            // Validate "name"
            if (form.name.value === "" || form.name.value === "His/her name") {
                errmsg = errmsg + " - His/her name\n";
            }
        }

        // Alert if fields are empty and cancel form submit
        if (errmsg === "Oops, you're required to complete the following fields! \n") {
            form.submit();
        } else {
            alert(errmsg);
            return false;
        }
    }
</script>
    </head>
    <body>
        <form name="form" action="https://www.paypal.com/cgi-bin/webscr" method="post" onSubmit="return validate(form)">

            <p class="row">
                <input type="hidden" name="on0" value="Pickup and delivery" />Pickup and delivery<br />
                <select name="os0" onchange="checkPickup()">
                    <option value="" selected >Choose</option>
                    <option value="Pickup from Toowong, Brisbane">Pickup from Toowong, Brisbane $1.00 AUD</option>
                    <option value="Brisbane +$23.60">Brisbane +$23.60 =$1.00 AUD</option>
                </select>
            </p>
            <p class="row">Your daytime phone number<br />
                <input type="text" name="phone" value="Mobile's best!" onclick="clickclear(this, 'Mobile\'s best!')" onblur="clickrecall(this,'Mobile\'s best!')" />
            </p>
            <p class="row">Recipient's name<br />
                <input style="color: #ccc" class="name" type="text" name="name" value="His/her name" onclick="clickclear(this, 'His/her name')" onblur="clickrecall(this,'His/her name')" disabled />
            </p>
            <input name="custom" type="hidden"  />
            <input type="hidden" name="currency_code" value="AUD" />
            <input class="button" type="image" src="https://www.paypalobjects.com/en_AU/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online." />
            <img alt="" border="0" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1"> -->
        </form>
    </body>
</html>

Answer 1

This may be a simple misunderstanding of what you've written: 这可能是对您所写内容的简单误解：

if (form.os0.value != "Pickup from Toowong, Brisbane" ) {
    form.name.disabled = false; form.name.style.color = '#333';
} else {
    form.name.disabled = true; form.name.style.color = '#CCC';
    //
}

translates to the following in plain english: 普通英语翻译如下：

If the value is NOT "Pickup from Toowong, Brisbane" , enable the field, otherwise disable it. 如果该值不是 "Pickup from Toowong, Brisbane" ，则启用该字段，否则禁用它。

which is equivalent to: 等效于：

ONLY disable the field when the value is "Pickup from Toowong, Brisbane" . 仅当值为"Pickup from Toowong, Brisbane"时禁用该字段。

I believe the logic you're looking for is: 我相信您要寻找的逻辑是：

if (form.os0.value == "Brisbane +$23.60" ) {
    form.name.disabled = false; form.name.style.color = '#333';
} else {
    form.name.disabled = true; form.name.style.color = '#CCC';
    //
}

though it might be prettier to code this with a switch statement due to the involvement of specific cases. 由于涉及特定案例，使用switch语句编写代码可能更漂亮。

See DEMO 见演示

Answer 2

did you intend to type double equal to (==) or is the triple equal to (===) a typo in the question? 您打算在问题中输入等于（==）的double还是等于（===）的三倍？ Based on looking at your code, it looks to me like you need a double equal to (==) not a triple. 基于查看您的代码，在我看来，您需要一个等于（==）的双精度数而不是三进制。 I think triple may mean something else. 我认为三重可能意味着其他。

如何使用JavaScript禁用表单下拉选项

问题描述

2 个解决方案

解决方案1
0 已采纳 2012-01-31 04:09:30

解决方案2
0 2012-01-31 04:19:12

如何使用JavaScript禁用表单下拉选项

问题描述

2 个解决方案

解决方案1 0 已采纳 2012-01-31 04:09:30

解决方案2 0 2012-01-31 04:19:12

解决方案1
0 已采纳 2012-01-31 04:09:30

解决方案2
0 2012-01-31 04:19:12