How can I programmatically flip the value of an element attribute using JQuery?

Question

Hello,

I'm just starting to get into JQuery so I apologize in advance if this is a simple question.

I'm working with the A List Apart article on Print Previews to try to get live Print Previews in the webapp that I'm working on. I've gotten it to work satisfactorily but I'm now trying to refactor my code to what I think it should look like internally. I currently have 2 sets of methods, one for displaying the block of microcopy and the other for removing it. I'd much rather just have a single set that toggles the appropriate values of the elements in question.

For the CSS that means disabling the non-print-preview sheets and enabling the print-preview one, and vice-versa. For my microcopy, that means setting display to block rather than none, again vice-versa.

At least for the the stylesheet links, I want to simply loop through the collection of related link elements and set disabled to !disabled but I can't figure out how to do that. I'm using jQuery but I'm not opposed to dropping below that level of abstraction.

I assume once I know how to do that for the link elements I should be able to extend the solution to also toggle the display attribute of the microcopy div.

Here's my current functions for the curious:

function printPreview() {
    $("link[rel*='style'][media!='print'").attr("disabled", true);
    $("link[rel*='style'][title='print preview']").attr("disabled", false);
    addPrintPreviewMicrocopy();
}

function addPrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").css({'display':'block'});
}

function normalView() {
    $("link[rel*='style'][media!='print'").attr("disabled", false);
    $("link[rel*='style'][title='print preview']").attr("disabled", true);
    removePrintPreviewMicrocopy();
}

function removePrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").css({'display':'none'});
}

Thanks in advance!

---

Thanks everyone. Here's my final solution:

function toggleView() {
    $("link[rel*='style'][media!='print']").each( function() {
        this.disabled = !this.disabled;
    });
}

It turns out that I didn't even need to toggle the div as the stylsheets alone did that.

Answer 1

You can toggle show/hide with the toggle function:

function removePrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").toggle();
}

Answer 2

The disabled HTML attribute is not technically boolean. It's an enumerable with either a value of "" or "disabled".

The disabled DOM property, however, is a boolean.

$('selector').attr( "disabled", "" );
$('selector').each( function() { this.disabled = false; } );

Also, your ID selectors are too complicated

$("div[id='print-preview-microcopy']")

should be

$("#print-preview-microcopy")

Answer 3

Another option is to use the show() and hide() methods.

$("#selector").show();
$("#selector").hide();

Or you could use a nice fade if you prefer.

$("#selector").fadeIn("slow");
$("#selector").fadeOut("slow");

It should be noted that "#selector" should be relpaced with the div id or the html tag in question.

Answer 4

For <link> elements you can toggle their disabled attribute with:

$('link[rel*=style]').each(function(){
  this.disabled = !this.disabled
})

This works because that attribute specifically is a read/write boolean property for <link> elements.

As for the divs you can use toggle() as others suggested.