javascript - 下拉框选择静音/禁用文本区域？

Question

我正在使用 Bootstrap 3 和 HTML5 创建 Web 表单。表单中有一个部分，用户可以通过下拉框选择“交付方式”。值为:商店提货、FedEx 和 Null。如果用户选择联邦 express ，则他应在标题为“送货地址”的文本区域中输入他的邮寄地址。但是，由于如果他选择“商店取货”或“空”，我们不需要他的邮寄地址，有没有办法使文本框静音或变灰，并且只有在他选择“FedEx”时才可写？

寻找有关如何处理此场景的想法。

我的 HTML:

    <div class="col-xs-3">    
    <div class="form-group">
        <label for="delivery">Method of delivery</label>
        <select id="delivery" name="delivery" class="form-control input-lg" tabindex="17">
            <option value="options" selected disabled>-Select-</option>
            <option value="Shop Pick-Up">Shop Pick-Up</option>
            <option value="FedEx">FedEx</option>
            <option value="null">Null</option>
        </select>
    </div>
</div>

<div class="col-xs-4">
<div class="form-group">
    <label for="shippingAddress">Shipping Address</label>
    <textarea name="shippingAddress" class="form-control" rows="7" placeholder="" tabindex="18"></textarea>
</div>

Answer 1

您有几种处理非必填字段的选项。如果他们选择 fedEx，最简单的选择是将属性 disabled 添加到文本区域。

http://jsfiddle.net/dy4r3/

您的另一个选择是使用 $.fn.hide() 和 $.fn.show() 隐藏非必填字段

http://jsfiddle.net/ANKXA/

显然，您可以扩展这些解决方案，使它们更加优雅，但这应该会让您朝着正确的方向前进。