jQuery attr and prop combination in script

Question

This is a part of my script using jQuery.

        jQuery(".disabableInputField").addClass("disabledInputField");
        cstaIpVal[0] = jQuery("#private-circuit-to-csta-subnet").val();
        cstaIpVal[1] = jQuery("#private-circuit-to-csta-subnet\\.netmask").val();
        jQuery("#private-circuit-to-csta-subnet\\.netmask").val("");
        jQuery("#private-circuit-to-csta-subnet").val("");
        jQuery(".disabableInputField").attr("disabled",true);           
        jQuery("#private-circuit-to-csta-subnet\\.netmask").prop("path", "");
        jQuery("#private-circuit-to-csta-subnet").prop("path","");

The question is, why the combination of calling prop and attr doesn't work. If I call attr("disabled",true) then the property set prop("path","") does not work. When I switch the order, then attribute set does not work. I can not achieve setting disabled attribute via prop. How can I combine attr and prop calling? Or how can I set disabled attribute of html element via prop calling?

Thank you.

You're misusing both methods. `prop` is for `disabled`, `attr` is for custom attributes (`path`) — hindmost, Sep 08 '15 at 10:29

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

You can disable element with :

jQuery(".disabableInputField").prop("disabled", true);

See : https://learn.jquery.com/using-jquery-core/faq/how-do-i-disable-enable-a-form-element/

And maybe this : .prop() vs .attr()

edited May 23 '17 at 12:29

Community

1
1

answered Sep 08 '15 at 10:35

Climooo

255
2
13

score 1 · Accepted Answer · answered Sep 08 '15 at 10:31

1

I guess it's becouse of missuse of methods. Use "prop" for setting properties, and "attr" for setting attributes. Not vice verse. The following worked fine for me.

<input type="text" id="test" />
<script type="text/javascript">
    jQuery("#test").prop("disabled",true);
    jQuery("#test").attr("path", "");
</script>
<!-- result -->
<input disabled="" id="test" type="text" path="">

answered Sep 08 '15 at 10:31

unconnected

991
1
10
21

code after change: `jQuery("#private-circuit-to-csta-subnet\\.netmask").prop("disabled",true); jQuery("#private-circuit-to-csta-subnet").prop("disabled",true); jQuery("#private-circuit-to-csta-subnet\\.netmask").attr("path", ""); jQuery("#private-circuit-to-csta-subnet").attr("path","");` path is correct, it is empty, but disabled attribute still does not work, it's still an editable field :/ I'm really confused now – Matej Šípka Sep 08 '15 at 11:21
Please show your html markup for #private-circuit-to-csta-subnet – unconnected Sep 08 '15 at 14:32
`` it can't be changed, I need to use this version Thank you for help. – Matej Šípka Sep 08 '15 at 14:37
You are using rendering engine, it can create some other element instead of "input". Please show what happens after render (View page source in browser) – unconnected Sep 08 '15 at 14:48
this is first render of the html `` after disabling the input field and clearing the value `` and after enabling input and putting back the value `` – Matej Šípka Sep 08 '15 at 15:33
Now I see the point of failure wont be the path attribute, but the value attribute, but in html I posted before, I am setting path not value... – Matej Šípka Sep 08 '15 at 15:33
To set the value for input use $('#id').val('your value'). And if you still having issues with disabling/enabling inputs you'd better check for some extra js-libs that are loaded at the page, because this class="disabableInputField" really confuses me/ – unconnected Sep 08 '15 at 16:25

jQuery attr and prop combination in script

2 Answers2