If statement using && with data attributes

[multichild]

Im not sure what’s wrong with this, as it seems fine to me, but running it in console all it seems to be doing is checking against the last check read-only

if (($('.sampleTest[data-test-not-available="true"]') && ($('.sampleTest').is(':checked')) && ($('.sampleTest[data-read-only="false"]')))) 
{
    $(this).prop("disabled", false);    
}

[m3g4p0p]

Hi @multichild, both

$('.sampleTest[data-test-not-available="true"]')

and

$('.sampleTest[data-read-only="false"]')

will not return booleans but jQuery objects, and objects always evaluate to true. To check if a given data attribute is set, you can use is() as you’ve done with is(':checked'):

var $sampleTest = $('.sampleTest')

if (
  $sampleTest.is('[data-test-not-available="true"]') && 
  $sampleTest.is('[data-read-only="false"]')
) {
  // ...
}

Or combined (but harder to read IMO):

if ($sampleTest.is('[data-test-not-available="true"][data-read-only="false"]')) {
  // ...
}

[multichild]

love it, and thank you, and works perfectly. Completely understand also

[m3g4p0p]

Glad I could help. :-)

[multichild]

I have this in a wider success function as below, its MVC so when the modal loads this if statement will check all the classes as there literally hundreds of them, or do I need to do an each or something similar.

$.ajax({
        url: $("#hdnEditContractPropertyFormUrl").val() + "&propertyId=" + propertyId,
        type: "GET",
        dataType: "html",
        success: function (data) {
            $('#mdlContractPropertyEditForm').modal('hide');
            $('#propertyModuleFormPartialContainer').html(data);
            $(".moduleElement").each(function () {
                UpdateModuleFormElements($(this), true);
            });
            $('#mdlContractPropertyEditForm').modal('show');

            ToggleLoadingOnModal("mdlContractPropertyEditForm", false);

            if (($('.sampleTest.is[data-test-not-available="true"]') && ($('.sampleTest').is(':checked')) && ($('.sampleTest.is[data-read-only="false"]')))) {
                $(this).removeAttr('disabled');    
            }

            InitialiseContractPropertyForm();
        }
    });

So maybe somehting like this, if its the right way

$(".sampleTest").each(function () {
if (($('.sampleTest.is[data-test-not-available="true"]') && ($('.sampleTest').is(':checked')) && ($('.sampleTest.is[data-read-only="false"]')))) {
$(this).removeAttr('disabled');
}
});

[m_hutley]

(I know mega called it less readable, but in this case)

You want to apply a (simple) change to a group of jQuery elements. You dont need (explicit) conditionals or loops. You simply select the correct set of elements to begin with, and apply a function to the selection, and let jQuery handle the looping…

$('.sampleTest[data-test-not-available="true"][data-read-only="false"]:checked').removeAttr('disabled');

[m3g4p0p]

@multichild

$('.sampleTest.is[data-test-not-available="true"]')

Note that this isn’t quite right anyway; is() is a jQuery method, not a CSS selector.

@multichild

$(".sampleTest").each(function () {
if (($('.sampleTest.is[data-test-not-available="true"]') && ($('.sampleTest').is(':checked')) && ($('.sampleTest.is[data-read-only="false"]')))) {
$(this).removeAttr('disabled');
}
});

Just for the sake of completeness, if you’re going with that approach, then inside the each() loop you need to also check the current element (i.e. this), not just any .sampleTest element:

$('.sampleTest').each(function () {
  var $this = $(this)

  if (
    $this.is('[data-test-not-available="true"]') &&
    $this.is('[data-read-only="false"]') &&
    $this.is(':checked') &&
  ) {
    $this.removeAttr('disabled')
  }
})