Why doesn't the JQuery `attr()` method work for me?

Question

 `var setOpenModal = function () {
    var theControl = $('.fOpenModal');
     theControl.off().on('click', function () {`if (WorkStates == 'To be PO') {
        $('#fPO').prop('checked', true);
        $("#fVendorCB1").attr('style', 'display:none');

     }else if(WorkStates == 'To be RFQ'){
        $('#fRFQ').prop('checked', true);
        $("#fVendorRad1").attr('style', 'display:none');
     }
        $.ajax({
                url:blalala',
                type: 'GET',
                dataType: 'json',
                cache: false,
                data: {
                 blalala,
                }
            })
        .done(function (json) {
            $.each(json.rows, function (index, data) {
             htmlPart += "<td>";
             htmlPart += "<input type='radio' id='fVendorRad1'  name='VendorRad'  value=" + data.ID + " " + isPO + ">";
             htmlPart += "<input type='checkbox' id='fVendorCB1' name='VendorCB'  value=" + data.ID + " " + isRFQ + " >" + data.Name + "<span class='ref-num'>" + "(" + data.ID + ")" + "</span>";
             htmlPart += "</td>";
    }
};

I want to add attribute 'style = display:none' through JQuery to tag HTML '$("#fVendorRad1").attr('style', 'display:none');' and $("#fVendorCB1").attr('style', 'display:none'); but it is not working.

The data html there are in the same object

It's `.css("display", "none")` (what you have works fine btw, but it will overwrite any other inline style) — , Sep 06 '19 at 08:18
Are `fVendorRad1` and `fVendorCB1` the inputs you add to htmlPart? Or are these already in the DOM and htmlPart will just replace the original elements? Since you cannot select elements with $() before they are actually on the page. So if the former is true, you have to add the styling and selected attributes in the input string, not select them from the DOM, since they aren't rendered yet. — Shilly, Sep 06 '19 at 08:20
Not sure why you'd want to use `attr()` for this, when `hide()` is available. Also, how is the second code block related to the first? Is that added to the DOM before you execute your `if` conditions? If not, there's your problem. — Rory McCrossan, Sep 06 '19 at 08:37
Also note that what you have already works: https://jsfiddle.net/64dhekot/. If it's not working for you please edit the question to include a more accurate example of your JS/HTML and also check the console for errors — Rory McCrossan, Sep 06 '19 at 08:42
@RoryMcCrossan thanks for your help but it diffrent context..i will update the code for a minute — Immanuel Saragih, Sep 06 '19 at 08:45

brk · Answer 1 · 2019-09-06T08:27:41.923

0

Two things use === instead of == and use css function to add inline style

if (WorkStates === 'To be PO') {
  $('#fPO').prop('checked', true);
  $("#fVendorCB1").css('display', 'none');

} else if (WorkStates === 'To be RFQ') {
  $('#fRFQ').prop('checked', true);
  $("#fVendorRad1").css('display', 'none');
}

edited Sep 06 '19 at 08:27

answered Sep 06 '19 at 08:25

brk

48,835
10
56
78

i have tried this but still not working – Immanuel Saragih Sep 06 '19 at 08:27
@ImmanuelSaragih please share your full relevant code – brk Sep 06 '19 at 08:27
Technically the OPs code already works: https://jsfiddle.net/64dhekot/. Therefore there must be some other underlying issue. – Rory McCrossan Sep 06 '19 at 08:41

score -1 · Answer 2 · answered Sep 06 '19 at 08:20

-1

Use .hide() method to hide elements

answered Sep 06 '19 at 08:20

Gettysburg

55
10

is not working too – Immanuel Saragih Sep 06 '19 at 08:28
@ImmanuelSaragih then you need to update your question to make the context of your code much clearer as what you have is already working: https://jsfiddle.net/64dhekot/. – Rory McCrossan Sep 06 '19 at 08:42
If this answer is "wrong" then all the others need to be deleted as well, as they all provide the same solution to OP's already working code. – Rory McCrossan Sep 06 '19 at 08:52

score -1 · Answer 3 · edited Sep 06 '19 at 08:52

The .attr() method is used for setting or getting the value of a certain attribute.

Example:

<img src="images/logo.png" class="logo" />

$("img").attr("src") // - This would return 'images/logo.png'

In order to style your element you have to use the .css() method:

$("img").css("display", "none"); // - This will hide your element

It can also be used to apply multiple styles like this:

$("img").css({
    "display": "none",
    "border": "1px solid #000"
});

Read more about the .css() method here.

Read more about the .attr() method here.

Why doesn't the JQuery `attr()` method work for me?

3 Answers3