This input has disabled as attribute

[multichild]

I am trying to disable a datepicker icon’s click function if its parent input field has disabled=“disabled”.

I have tried all sorts, but this is the structure below:

<input autocomplete="off" class="dateinput text-box single-line textSizeSmall" data-default-date="today" data-hidden-start-date-field="hdnStartDateDate_Time" data-iconfield="icnDate_Time" data-required="true" disabled="disabled" id="txtDateTime" readonly="readonly">

<span autocomplete="off" class="datepickerIcon" data-showing="false" id="icnDate_Time" readonly="readonly">
<img src="/Images/Shared/Button_DatePicker.png" alt="icon of calender">
</span>

These are all my attempts, but none work

if ($(this).closest(".dateinput").attr('disabled','disabled').length) {

if ($(this).closest(".dateinput[disabled]").length) {

if ($(this).closest(".dateinput").is("[disabled=disabled]")) {

if ($(this).closest(".dateinput").find("disabled").length) {

if ($(this).closest(".dateinput").prop('disabled', 'disabled'))

if ($(this).closest(".dateinput").is(':disabled'))

To give it more context

$('.datepickerIcon').unbind("click").on('click', function () {
        if ($(this).data("showing") !== true) {
            if ($(this).closest(".dateinput").find("disabled").length) {
                alert("1");
                //$("input[data-iconfield='" + $(this).attr('id') + "']").trigger('click');
            } else {
                alert("2");
                $("input[data-iconfield='" + $(this).attr('id') + "']").trigger('click');
            }
        } else {
            alert("3");
            $("input[data-iconfield='" + $(this).attr('id') + "']").trigger('click');
            $(this).data("showing", !$(this).data("showing"));
        }
    });

[Gandalf]

I’m not sure about jQuery, so I don’t know if this helps at all, but in vanilla JS, you would disable/enable an element by setting element.disabled = true or false.

[multichild]

Hi gandalf458, ye I could do that, but what Im finding is that to allow me to do this my if this .closest is not identifying if the input has disabled=“disabled” set.

[m_hutley]

Here’s the flaw in your logic:

@multichild

if its parent input field

It’s not a parent. It’s a sibling. inputs aren’t containers (ever wonder why textarea and select aren’t inputs?)

.closest doesnt look at siblings. It goes up the tree.

What you’re trying to do is reference $(this).siblings('.dateinput') or $(this).prev('.dateinput').

[multichild]

@multichild

.attr(‘disabled’,‘disabled’).length) {

Oh I see, so I changed it this, so the prev bit is right, just got to work out the rest of it.

if ($(this).prev(".dateinput").attr('disabled', 'disabled').length)

[multichild]

@multichild

(“.dateinput[disabled]”).length)

I think I have it

if ($(this).prev(".dateinput[disabled]").length)

[m_hutley]

That’ll do it. .attr(‘disabled’,‘disabled’) is SETTING the attribute, not finding it.

[multichild]

that’s it, thank you m_hutley

[m_hutley]

Also be aware that this has potential to screw up if you’ve got multiple of these datepickers in the same container -

Consider:

<input name='dp1' class='datepicker' disabled='disabled'>
<span class='icon' onclick="DoMyFunction();">
....
<input name='dp2' class='datepicker'>
<span class='icon' onclick="DoMyFunction();">

Clicking on DP2’s icon will find a match for $(this).prev(".datepicker[disabled='disabled']") - because DP 1 is still a sibling of that span.

You might want to use the slightly longer $(this).prev(".datepicker").filter("[disabled='disabled']"), which avoids this possibility by selecting the first datepicker before the span, and THEN testing to see if it’s disabled, if you want to put multiple in a single container.

[multichild]

@multichild

.find(“disabled”).length)

Ok cool, thanks.

Im just thinking about it now, there want be an instance where 2 next to each other will have different disabled values, as the user within that form will either have the option to edit or not, so hopefully then with that will .prev cover them both, as long as the developer has built it right, to allow for this.