Question

我正在制作一个网站，里面有一个表格...现在我想做的很简单，但我不知道怎么回事，所以我问你们。在此表单中，您可以选择是否要在购买的衣服上使用自定义文字。您可以使用select语句选择yes和no。在它旁边有一个输入文本，您可以在其中填写此文本。我想要做的是当select的值为no或者仍然是默认值时，输入文本被禁用，当值为yes时，它被启用。

输出截图 http://prntscr.com/4ym079

我的代码：

        <div class="form-group col-md-6" style="margin-bottom: 25px; padding:0;">
            <label class="col-md-12 control-label" for="producttext">Eigen text op product *</label>
            <div class="col-md-12">
                <select id="producttext" name="producttext" class="form-control" required="">
                    <option class="active" value="default" selected disabled>Eigen text op product</option>
                    <option value="nee">Nee</option>
                    <option value="Ja">Ja(+€3,50)</option>
                </select>
            </div>
        </div>
        <script>
        </script>
        <div class="form-group col-md-6" style="margin-bottom:0;">
            <label class="control-label" for="product_text">Uw eigen text*</label>
            <input id="product_text" name="product_text" placeholder="Indien Ja" class="form-control input-md" type="text">
        </div>

如果您还有任何疑问，请与我联系。

DeusGladio

Answer 1

附加onchange功能并启用/禁用输入：

document.getElementById("producttext").onchange = function() {
    document.getElementById("product_text").disabled = (this.value == "nee" || this.value == "default");
}
document.getElementById("producttext").change(); //to trigger on load

或者使用jQuery：

$("#producttext").change(function() {
    var disabled = (this.value == "nee" || this.value == "default");
    $("#product_text").prop("disabled", disabled);
}).change(); //to trigger on load

小提琴：http://jsfiddle.net/covq84f7/

Answer 2

使用jQuery：

$('#producttext').change(function () {
    if ($(this).find('option:selected').text() != 'nee') {
        $('#product_text').prop('disabled', false);
    } else {
        $('#product_text').prop('disabled', true)
    }
});

Answer 3

请在选择选项上写上onchange javascript事件，并尝试下面的代码来获取值

var e = document.getElementById("selectId");
var selectedValue = e.options[e.selectedIndex].value;

if(selectedValue == "yes")
{
//ur code
}else
{ 
//ur code
}

Answer 4

DEMO

这是您需要的jQuery代码。您可以收听change事件，并根据选择的值更改input的状态。要在页面加载时使用此功能，请使用change触发.change()事件。

$(function() {
    $('#producttext').on('change', function() {
       $('#product_text').prop('disabled', this.value != 'Ja');
    })
    .change();
});

禁用并启用表单文本输入，具体取决于值表单选择..？

4 个答案: