CODEWITHSUNDEEP
javascriptjqueryhtml
raj
raj

Reputation: 59

How to make non editable text box to editable when i click on check box corresponding to it

There are one check box and a non editable text box corresponding to it. When I click on check box, corresponding non editable text box should become an editable text box. How can I achieve this?

Upvotes: 1

Views: 9228

Answers (2)

Ram Kannan Raj
Ram Kannan Raj

Reputation: 88

This code actually works fine, and ready to use.

This is the form stuff: 

<form id="myGame" name="myGame" action="" method="post">
<input type="radio" name="checkme" id="checkme" onClick="openTheHouse();" >Open Sesame
<input name="open_id" id="openid" type=text disabled="disabled">
</from>

And the Script: its pretty cool actually, nothing complicated in this script. 

<script type="text/javascript">
function openTheHouse()
{

if(document.myGame.checkme.checked == true)
{
document.myGame.openid.disabled = false ;
}

}
</script>

thats it, all done. Certainly i believe it works.

Upvotes: 1

David Hedlund
David Hedlund

Reputation: 129832

Basically:

$('#some-checkbox').click(function() {
   $('#some-textfield').prop('disabled', !$(this).is(':checked'));
});

Now, how you go about finding the corresponding text box depends on your markup. One way could be to give the text box a class that is the ID of the checkbox. Applying that to all checkboxes might look something like this:

$(':checkbox').click(function() {
   var box = $(this);
   $('.' + box.attr('id')).prop('disabled', !box.is(':checked'));
});

Otherwise, the text field may be located by its position on the DOM:

<div class="wrapper">
   <input type="checkbox">
   ...
   <div>
      <input type="text" disabled="disabled" />
   </div>
</div>

You might then do something like:

$(':checkbox').click(function() {
   var box = $(this);
   box.closest('.wrapper').find('input[type=text]').prop('disabled', !box.is(':checked'));
});

Upvotes: 4

Related Questions