How to determine if the field is enabled or not

Question

I have the following script, to display an "*" beside any required fields:-

$('input[data-val-required]').after('<span class='my-class'>*</span>')

But can i define extra filtering so that the "*" will only be displayed if the following is true:-

1. the field is an Input field with data-val-required ?
2. the field is not disabled , or is not read-only?

Thanks

Answer 1

Try

:not()

Has Attribute Selector [name]

$('input[data-val-required]:not([disabled],[readonly])').after('<span class="my-class">*</span>')

Fiddle Demo

---

Update After OP's Comment

Fiddle Demo

Attribute Equals Selector [name="value"]

$('input[data-val-required]:not([disabled],[readonly],[type="hidden"])').after('<span class="my- class">*</span>')

Answer 2

Try to use:

$('input[data-val-required]').each(function() {
    if($(this).is(':disabled')) {
        $(this).after('<span class="my-class">*</span>')
    }
});

Answer 3

You can use filter():

$('input').filter(function() {  
    return $(this).data('val-required') && !$(this).prop('disabled') && !$(this).prop('readonly');
}).after('<span class="my-class">*</span>');