How do i disable a text box within an iframe

Question

The scenario: One big bulky page called index.html, everything happens here. Index has 10 tabs (jquery ui tabs). Using jquery ui's accordion widget, each tab now has, on average, 3-5 sub categories (I was denied posting a picture as spam prevention but I hope you understand what the layout looks like). Here's where the problem starts. An iframe resides in all of these, so I'm looking at 25-30 iframes with about 5-10 text fields in each iframe. What I want to do is just simply enable/disable these text fields.

Quite simply i know this can be done by:

$('input[type=text]').attr("disabled", "disabled");

$('input[type=text]').removeAttr("disabled")

A button on index triggers a function:

 $(".frameClass").each(function () {
                console.log("i found a frame called " + this.name);
});

How do I make this connection for all input text fields to be enabled on a click? I even tried creating a function within the iframe and tried calling it from within the .each()

this.unlockFields();

hasn't gotten me anywhere, any thoughts?

Answer 1

You have to use .contents() to access the elements in the iframe, like so:

$(".frameClass").each(function () {
     $(this).contents().find('input[type=text]').attr('disabled', 'disabled');
});

that should do what you want, given that the iframe contains a page that is on the same domain as the main page.

Answer 2

Try this:

var iframes = $('iframe');
iframes.each(function(index, iframe) {
    var iframe_content = ($.browser.msie ? $(iframe.contentWindow.document) : $(iframe.contentDocument));
    iframe_content.find('input[type=text]').attr({disabled:'disabled'});
});