2. Algorithm
  3. javascript - Jquery use data-id and disable and clear input field - Stack Overflow

javascript - Jquery use data-id and disable and clear input field - Stack Overflow

admin2025-04-22  0

For a variety of reasons I want to change the code below to look out for data attributes rather than a class called "mygroup".

HTML

<select id="apply">
    <option value="email">Email</option>
    <option value="website">Website</option>
</select>
<input type="text" class="input" id="email" placeholder="[email protected]" data-id="application"/>
<input type="text" class="input" id="website" placeholder="www.example" 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');
};

FIDDLE

How do I change the code above apply to data-id of "application" rather than using the class "mygroup". For bonus points can anyone tell me how to clear the content of the field that is being hidden and also disable it?

For a variety of reasons I want to change the code below to look out for data attributes rather than a class called "mygroup".

HTML

<select id="apply">
    <option value="email">Email</option>
    <option value="website">Website</option>
</select>
<input type="text" class="input" id="email" placeholder="[email protected]" data-id="application"/>
<input type="text" class="input" id="website" placeholder="www.example." 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');
};

FIDDLE

How do I change the code above apply to data-id of "application" rather than using the class "mygroup". For bonus points can anyone tell me how to clear the content of the field that is being hidden and also disable it?

  • javascript
  • jquery
Share Improve this question edited Jul 11, 2013 at 9:54 Thirumalai murugan 5,9248 gold badges34 silver badges54 bronze badges asked Jul 11, 2013 at 9:51 J.ZilJ.Zil 2,4498 gold badges46 silver badges82 bronze badges 1
  • possible duplicate of how to select data-id and data-action in jQuery – revolver Commented Jul 11, 2013 at 9:56
Add a ment  | 

2 Answers 2

Reset to default 4

You simply refer to it as $('[data-id="application"]').

As for the clearing and disabling, use .prop() and .val(''):

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

DEMO

Try to use the attribute selector, ie all elements with attribute data-id instead of having class 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();
});

Demo: Fiddle

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745251467a292530.html

javascriptJquery use dataid and disable and clear input fieldStack Overflow

最新回复(0)