Question

我正在使用Bootstrap 3和HTML5来创建Web表单。表格的一部分，用户可以通过下拉框选择他的“交付方式”。值为：Shop Pick-Up，FedEx和Null。如果用户选择FedEx，他将在textarea的邮寄地址输入标题为“送货地址”的邮件地址。但是，如果他选择“Shop Pick-Up”或“Null”，我们不需要他的邮寄地址，是否有办法将文本框静音或灰显，只有选择“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添加到textarea。

http://jsfiddle.net/dy4r3/

您的其他选择是使用$.fn.hide()和$.fn.show()

隐藏非必填字段

http://jsfiddle.net/ANKXA/

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

Answer 2

为shippingAddress元素添加id（标题for应该有一个）

然后，您可以在选择框更改时设置disabled属性

$('#delivery').change(function(){
   $('#shippingAddress').prop('disabled', !($(this).val() == "FedEx"));
});

Answer 3

您可以使用更改事件并根据所选值更新文本框。

$('#delivery').on('change', function(e){
    if($(this).val() == 'FedEx') 
        $('#shippingAddress').prop('disabled', false);
    else 
        $('#shippingAddress').prop('disabled', true);
});

Answer 4

textarea的disabled属性可以帮到你。

Fiddle Demo

但显示和隐藏会更好。

但是显示和隐藏将使你的形式摇晃所以应用一些动画来避免或者使用这个approch但是这个approch也有一些缺陷，因为用户在他被允许输入地址时直接清除。< / p>

我更喜欢通过表演和隐藏，因为它很容易和信息丰富。

Here is demo with show and hide

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

4 个答案: