0

I have created a form which has some Readonly input fields and an icon next to all of them. How do I change the Readonly property of the particular field when I click the icon next to it.

Form

<div class="input-group">
<input class="input--style-3" type="text" name="phone" id="phone" placeholder="Phone" value= "<?php echo $this->session->userdata('phone'); ?>" />
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
</div>
Improve this question

1 Answer 1

Reset to default
2 
$('.input-group-addon').click(function(){
  $(this).parent() // gets parent container 'input-group'
    .children('input') // gets the input in the container
    .removeAttr('readonly'); // removes the readonly attr from the input
});
  • We're binding a function to the click of the element (in your case the icon)
  • We're selecting the parent of 'this' to get the element our icon is contained within
  • We're finding a child (an element directly inside our parent, adjacent to our icon) that is of type 'input' (there should only be one if you're marking up semantically)
  • We're removing an attribute from the input element

I tested this here with perfect result (before clicking the red square you cannot change the telephone number) https://codepen.io/anon/pen/pXXPNo

I hope that not only moves you forwards but aids in your understanding

Also, if you're creating elements on the fly instead of having them in the DOM come load, you'll need to change your binding like so:

$('body .input-group-addon').on("click", function(){
  $(this).parent() // gets parent container 'input-group'
    .children('input') // gets the input in the container
    .removeAttr('readonly'); // removes the readonly attr from the input
});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanx it did help

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.