CODEWITHSUNDEEP
javascriptjquery
Jordan Davis
Jordan Davis

Reputation: 875

Run function after a checkbox change on my page

I have dynamically created check boxes on my page and assigned each of them an unique id like 'renameteam1', 'renameteam2' etc.. I am trying to run a function when one of these gets checked. The function will then allow the user to enter a corresponding field that was previously readonly.

I have tried the following but it doesn't seem to be working.

var a=0;
$('input[type=checkbox]').change(function () {
for (var i=0;i<rows3;i++){
     a=a+1;
     var id= '#renameteam'+a;
if ($(id).is(":checked")) {
    $('#newname'+a).removeProp('readonly');
  }
 }
//Here do the stuff you want to do when 'unchecked'
});

Any Suggestions?

Upvotes: 0

Views: 725

Answers (2)

Pete
Pete

Reputation: 58422

This is how I would do it

//delegate the event so you can call this on document ready and it will still be bound to any dynamically created elements
$(document).on('change', 'input[type=checkbox]', function() {
  var checkbox = $(this),
    otherInput = $('#' + checkbox.data('id'));

  otherInput.prop('readonly', !checkbox.is(':checked'));

  if (!checkbox.is(':checked')) {
      // do stuff here when checkbox isn't checked - not sure if you still want this bit but it is as per your comments in the code above
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="" id="renameteam1" data-id="newname1" />
<!-- use a data attribute to target the id of the input you want to make readonly -->

<input type="textbox" name="textbox" value="" id="newname1" readonly />

If you don't want to use a data attribute, you could do this:

//delegate the event so you can call this on document ready and it will still be bound to any dynamically created elements
$(document).on('change', 'input[type=checkbox]', function() {
  var checkbox = $(this),
    otherInput = $('#newname' + this.id.replace('renameteam', ''));

  otherInput.prop('readonly', !checkbox.is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="" id="renameteam1" />
<!-- use a data attribute to target the id of the input you want to make readonly -->

<input type="textbox" name="textbox" value="" id="newname1" readonly />

Upvotes: 2

Bindrid
Bindrid

Reputation: 3735

Try using an on click instead of on change for checkboxes and radio buttons.

Upvotes: 0

Related Questions