CODEWITHSUNDEEP
htmljqueryjquery-events
Paradigm
Paradigm

Reputation: 189

jQuery disable and enable based on option selected

I have toggled through a lot of forums and used the suggested way of doing this but it seems not to work. So I am looking for a second pair of eyes to help me discover what I did wrong.

This is a CMS generating the form and I am simply writing a script to do the rest. According to the CMS for jQuery purposes I can interchange the name and id. Below I'll show my jQuery code then the piece I am trying to manipulate. The form already disables the text box it just does not re-enable it after the choice is selected.

<script type="text/javascript">  
  $(document).ready(function() 
  {
    $("input:text[name=Other]").attr("disabled", true);
      $("select[name=School[]]").change(function() 
      {
      var chk= $(this).val();
        if (chk == 'Other') 
        {
          $("input:text[name=Other]").attr("disabled", false);
        }
      });
  });
</script>

<form id="ouforms" name="ouforms" method="post" class="ldpforms">    
  <select name="School[]">
    <option value="PleaseSelect" checked="checked">(Please Select)</option>
    <option value="BeachPublicSchools">Beach Public Schools</option>
    <option value="BelfieldPublicSchools">Belfield Public Schools</option>
    <option value="BillingsCountyPublicSchools">Billings County Public Schools</option>
    <option value="BowmanCountyPublicSchools">Bowman County Public Schools</option>
    <option value="DakotaHorizonYouthCenter">Dakota Horizon Youth Center</option>
    <option value="DickinsonAdultLearningCenter">Dickinson Adult Learning Center</option>
    <option value="DickinsonCatholicSchools">Dickinson Catholic Schools</option>
    <option value="DickinsonStateUniversityStudents">Dickinson State University Students</option>
    <option value="EarlyChildhoodLeft">Early Childhood Left</option>
    <option value="GlenUllinPublicSchools">Glen Ullin Public Schools</option>
    <option value="HallidayPublicSchools">Halliday Public Schools</option>
    <option value="HebronPublicSchools">Hebron Public Schools</option>
    <option value="HettingerPublicSchools">Hettinger Public Schools</option>
    <option value="HopeChristianAcademy">Hope Christian Academy</option>
    <option value="KilldeerPublicSchools">Killdeer Public Schools</option>
    <option value="LoneTreeGolvaPublicSchools">Lone Tree (Golva) Public Schools</option>
    <option value="MottRegentPublicSchools">Mott/Regent Public Schools</option>
    <option value="NewEnglandPublicSchools">New England Public Schools</option>
    <option value="RichardtonTaylorPublicSchools">Richardton  Taylor Public Schools</option>
    <option value="ScrantonPublicSchools">Scranton Public Schools</option>
    <option value="SouthHeartPublicSchools">SouthHeart Public Schools</option>
    <option value="SWCHS">SWCHS</option>
    <option value="TwinButtesPublicSchools">Twin Buttes Public Schools</option>
    <option value="WestRiverSpecialServices">West River Special Services</option>
    <option value="Other">Other</option>
  </select>
  <br/>
  <label for="Other">Other: </label>
  <input type="text" name="Other" value=""/>
</form>

Upvotes: 1

Views: 1332

Answers (4)

sergioccg
sergioccg

Reputation: 21

Hello and first of all I wanted to thank you Robertpurpose for your code, and the others of course. I tried your code as is but nothing happened...so I check if it wasn't a problem with my version of jquery or another scripts...but again nothing....then I played and found that it worked if I delete the [] of the select statement...as follows: select[name='School']

Hope this helps someone else...

Upvotes: 1

user405398
user405398

Reputation:

For some reason, the change event binding is not successful. When tried to fiddle your code, it was not working.

Then i just changed select[name=School[]] to select[name='School[]'] (watch the single quotes), it is started to work.

I am not sure why, this quotes making the selector valid. Because, somewhere i have read that without quotes the attribute selector should work fine.

Anyway, i too learnt something today.

Thanks.

Upvotes: 2

j08691
j08691

Reputation: 208002

How about this:

$("input:text[name=Other]").attr("disabled", true);
$('select[name="School[]"]').change(function() {
    $("input:text[name=Other]").attr("disabled", ($(this).val() == 'Other') ? false : true);
});​

This will change the disabled attribute of the text input based on whether the "Other" option is selected or not.

jsFiddle example.

Upvotes: 1

Pete Lada
Pete Lada

Reputation: 1318

you should use: var chk= $(this).find(':selected').val();

Upvotes: 1

Related Questions