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

Question

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:

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.

J0HN · Accepted Answer · 2012-10-05 15:21:11Z

1

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.

answered Oct 5, 2012 at 15:21

J0HN

27.1k5 gold badges59 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wirey00 · Accepted Answer · 2012-10-05 15:21:14Z

1

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.

answered Oct 5, 2012 at 15:21

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Comments

Sushanth -- · Accepted Answer · 2012-10-05 15:30:22Z

1

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...

edited Oct 5, 2012 at 15:30

answered Oct 5, 2012 at 15:16

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

CobaltBlue · Accepted Answer · 2012-10-05 17:52:52Z

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);
    });
});

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related