CODEWITHSUNDEEP
jqueryinputrefactoringreadonly
Ricardo Deano
Ricardo Deano

Reputation: 2819

How to refactor jquery "Make read only based upon check box selection"

Afternoon all.

A little Friday treat for you all.

I have the following bit of jquery that makes inputs read only based upon and another input's selection:

I really do like jsfiddle

That works fine and dandy, well how I want it to work.

However, in my situation I have about 13 "checkbox1a" 's with their associated checkbox1b & textbox1.

As you can see from the script, I could just replicate this code but as we all know, copy and paste is bad (although appeals on a Friday afternoon) so I was wondering how I could go about attacking this so that I can minimise code but achieving the same result,

Any pointers greatly appreciated.

Upvotes: 0

Views: 765

Answers (4)

CobaltBlue
CobaltBlue

Reputation: 354

I just tackled something similar. Here's how I handled it:

Add a class to the checkboxes and textboxes, then move the index of the ID to the end of the string (makes it easier jquery), so it can look like this:

Here's the fiddle link

<table>
    <tr>
        <td><input  class="checkboxa" type="checkbox" name="input1" id="checkboxa1"/> </td>
        <td><input  class="checkboxb" type="checkbox" id="checkboxb1" /></td>
        <td> <input type="text" id="texbox1" /></td>
    </tr>
    <tr>
        <td><input  class="checkboxa" type="checkbox" name="input2" id="checkboxa2"/> </td>
        <td><input  class="checkboxb" type="checkbox" id="checkboxb2" /></td>
        <td><input type="text" id="texbox2" /></td>
    </tr>
</table>

Using this approach, the JQuery can target the control directly, rather than having to traverse up and down the DOM trying to find the controls with "closest" or "find".

$(function() {
    $('.checkboxa').click(function() {
        var index = $(this).attr('id').toString().substring(9);
        $('#checkboxb' + index).attr('disabled', $('#checkboxa' + index)[0].checked);
        $('#texbox' + index).prop('disabled', $('#checkboxa' + index)[0].checked);
    });
});​

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

You can write up a single click event to all these..

var $tr = $(this).closest('tr');

// access checkbox b inside it

  $tr.find('[id*=checkbox][id$="b"]').attr('disabled', 'disabled');

// access textbox  inside it

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

Check FIDDLE

You can write up a single click event to handle all the checkbox click events this way.

A better was is to give classes to the checkboxes instead of id's to them..

checkbox a - class="checkboxa" checkbox b - class="checkboxb" textbox - class="textbox"

UPDATED FIDDLE WITH CLASSES

This will make your code cleaner and easier to handle...

Upvotes: 1

wirey00
wirey00

Reputation: 33661

You can combine all into one change event - assuming these are the only checkboxes you have on the page.. or you can give them a class to select them by

$('input[type=checkbox]').change(function(){
   var $this = $(this); 
   var $inputs = $this.closest('tr').find('input'); // get relative inputs
   $inputs.not($this).prop('disabled',$inputs[0].checked);  
   // disable fields if first checkbox is checked
});

http://jsfiddle.net/EEuUw/

Also prop is the proper way to set the disabled property(jQuery 1.6+). This is from jQuery docs

The .prop() method should be used to set disabled and checked instead of the .attr() method.

Upvotes: 1

J0HN
J0HN

Reputation: 26961

Just add some classes and do a bit jQuery voodoo. See on jsfiddle.

It's possible not to add classes to controls that are disabled/enabled, but with classes you have a more granular control on what to enable/disable.

Upvotes: 1

Related Questions