javascript - Jquery 使用 data-id 并禁用和清除输入字段

Question

出于多种原因，我想更改下面的代码以查找数据属性而不是名为“mygroup”的类。

HTML

<select id="apply">
    <option value="email">Email</option>
    <option value="website">Website</option>
</select>
<input type="text" class="input" id="email" placeholder="test@test.com" data-id="application"/>
<input type="text" class="input" id="website" placeholder="www.example.com" data-id="application"/>
<textarea class="input" rows="4" cols="50" placeholder="text*" data-id="applicationdetails"></textarea>

JS

// Apply Fields
function applyField() {
    $(document).on('change', '#apply',function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $(".mygroup").addClass('hidden');
        elem.removeClass('hidden');
    });
    $("#apply").trigger('change');
};

小提琴

如何更改上面的代码适用于“应用程序”的数据 ID，而不是使用“mygroup”类。对于加分，谁能告诉我如何清除被隐藏的字段内容并禁用它？

Answer 1

您只需将其称为$('[data-id="application"]').

至于清除和禁用，使用.prop()and .val('')：

$('[data-id="application"]').addClass('hidden').prop('disabled', true).val('');
elem.removeClass('hidden').prop('disabled', false);

演示

Answer 2

尝试使用属性选择器，即所有具有属性data-id而不是类的元素myClass

function applyField() {
    $(document).on('change', '#apply',function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $("input[data-id]").addClass('hidden');
        elem.removeClass('hidden');
    });
    $("#apply").trigger('change');
};

jQuery(function($){
    applyField();
});

演示：小提琴