Question

I have a data entry form on my site which contains multiple checkboxes, two radio buttons and a text field. I want to make the text field un-editable if one of my radio buttons is selected. With an error message if the customer tries to type in it. I’m new to Jquery and web coding so am having trouble finding relevant answers.

The radio buttons and text area are as follows

    <form method="post" class="required-form" action="php/addcompanyengine.php">
  <ul class="forms">


    <p class="Region">Please select the type of listing you desire</p>
    <ol>
        <li><label class="checkbox">Bronze Listing</label>
        <input type="radio" name="listing[]" id="listing" value="Bronze" checked></li>
        </ol>
        <ol>
        <li><label class="checkbox">Silver Listing</label>
        <input type="radio" name="listing[]" id="listing" value="Silver"></li>
    </ol>



      <label for="Description">Description:<br /><br />
            (Silver listings only <br /> <br />
            Maximum 400 characters)</label>
            <textarea name="Description" cols="20" id="Description" maxlength="400" ></textarea>

Basically if the customer leaves the radio button on Bronze (the default) I want the text field unavailable, if they select silver I’d like it available for them to type into.

Many thanks, it’s much appreciated.

Answer 1

Assuming you already have jQuery loaded (note the class attribute instead of ID):

<ol>
    <li><label class="checkbox">Bronze Listing</label>
    <input type="radio" name="listing[]" class="listing" value="Bronze" checked></li>
    </ol>
    <ol>
    <li><label class="checkbox">Silver Listing</label>
    <input type="radio" name="listing[]" class="listing" value="Silver"></li>
</ol>

<script type="text/javascript">
    $(document).ready(function() {
        $('.listing').change({
            if ($(this).val() == 'Bronze') {
                $('#Description').attr('readonly','readonly');
            } else {
                $('#Description').removeAttr('readonly');
            }
        });
    });
</script>

You can see it in action here: http://jsfiddle.net/AZ7wJ/

If you want the textarea originally non-editable as well, you can add the readonly="readonly" attribute to it.