Question

Perhaps my last question (now deleted) was misunderstood so I’m reposting it with more clarity this time:

jQuery(UI):

$("#tabs").tabs({
   select: function(event, ui) { 
        alert(ui.panel.id);
        $('input[name=myinput], textarea[name=myinput]').attr('disabled', true); 
        $('input[name=myinput].' + ui.panel.id + ', textarea[name=myinput].' + ui.panel.id).removeAttr('disabled'); 
        $('input[name=source]').val(ui.panel.id);
   }
});

HTML:

<div id='tabs'>
    <ul>
        <li><a href="#direct">Direct input</a></li>
        <li><a href="#files">File upload</a></li>
        <li><a href="#uri">URI</a></li>
    </ul>
    <div id="direct">
        <textarea name='myinput' class='direct'></textarea>
    </div>
    <div id="file">
       <input type='file' name='myinput' class='file' />
    </div>
    <div id="uri">
       <input type='text' name='myinput' class='uri' />
    </div>
</div>
<input type='hidden' name='source' value='direct' />
<input type='submit' value='GO' />

I don’t quite understand what the jQuery is doing with the input. I want to use regular jQuery and avoid the “jQueryUI” tabs so its important that I understand what happening with the input to I can reproduce the same effect when I use regular jQuery.
Hope I’m making sense.

Thanks for your help!

Answer 1

When the select function is called:

$('input[name=myinput], textarea[name=myinput]').attr('disabled', true);

Find all input and textarea elements named myinput and disable them.

$('input[name=myinput].' + ui.panel.id + ', textarea[name=myinput].' + ui.panel.id).removeAttr('disabled');

Find any input elements and textarea elements with the name myinput and the class that matches the value of the ui.panel.id property and enable them.

$('input[name=source]').val(ui.panel.id);

Find the input element (or elements, but I bet there’s only one) with the name source and set its value to the value of the ui.panel.id property.

E.g.: Disable all of the myinput input and textarea elements except the one matching the ui.panel.id property according to its class, and set the value of the input named source to that property, presumably to keep track of which inputs are enabled / which tab is showing.