jQuery try to set TextBoxFor values based on unchecking CheckBoxFor in MVC3

3.3k Views Asked by At

I have a view that is populating a checkboxfor and textboxfor from a database. There are multiples of these depending on how many records are in the model. This is all working fine. But now I want to have a script that will blank out the appropriate textbox if they uncheck the box. The script is running, but it appears to not find the textbox - I have tried this 7 ways to Sunday and when it hits the line to set the value to an empty string, it just moves on and nothing happens. When I view the source code, what is in my variable is the id of the textbox I am trying to manipulate. I've been pulling my hair out with this one for 2 days now. Any assistance is appreciated.

Here is the script:

<script type="text/javascript">
    $(document).ready(function () {
        $('.chkbox').live('click', function () {
            if ( ! $(this).attr('checked')) 
                {
                var myid = "txtbox_" + $(this).attr('id');
                var varempty = '';
                $("#" + myid).val = (varempty);
            }

        });
    });

Here is where I create the checkboxfor/textboxfor:

@For x = 0 To Model.Count - 1
      Dim i As Integer = x
      @&lt;tr&gt;
      &lt;td class="checkboxcolumn"&gt;
      @Html.HiddenFor(Function(model) model(i).Soft_ID)
      @Html.HiddenFor(Function(model) model(i).ESR_Soft_ID)
      @Html.CheckBoxFor(Function(model) model(i).Soft_Checked, New With {.id = Model(i).Soft_ID.ToString, .class = "chkbox"})
      &lt;/td&gt;
      &lt;td class="checkcolumn"&gt;
      @Html.Label(Model(i).Soft_Title)
      &lt;/td&gt;
      &lt;td class="checkcolumn"&gt;
      @Html.TextBoxFor(Function(model) model(i).License_Key, New With {.size = "50", .id = "txtbox_" + Model(i).Soft_ID.ToString})
      &lt;/td&gt;
      &lt;/tr&gt;
   Next

And here is what is rendered in page source, showing the id of the textboxfor is "txtbox_x", which matches what I'm putting together in my script:

<tr>
      <td class="checkboxcolumn">
      <input data-val="true" data-val-number="The field Soft_ID must be a number." data-val-required="The Soft_ID field is required." name="[0].Soft_ID" type="hidden" value="1" />
      <input data-val="true" data-val-number="The field ESR_Soft_ID must be a number." data-val-required="The ESR_Soft_ID field is required." name="[0].ESR_Soft_ID" type="hidden" value="17" />
      <input checked="checked" class="chkbox" data-val="true" data-val-required="The Soft_Checked field is required." id="1" name="[0].Soft_Checked" type="checkbox" value="true" /><input name="[0].Soft_Checked" type="hidden" value="false" />

      </td>
      <td class="checkcolumn">
      <label for="Adobe_Writer">Adobe Writer</label>
      </td>
      <td class="checkcolumn">
      <input id="txtbox_1" name="[0].License_Key" size="50" type="text" value="adobe key" />
      </td>
      </tr>

Any assistance will be greatly appreciated! I've been banging my head on the wall for 2 days on this. I have tried setting :eq(index), setting [input id=variable] and a multitude of other things without success. It is firing the script when a checkbox is clicked and does properly retrieve the id of the checkbox and properly build the name of the associated textbox - it just doesn't appear to find the field and set the val to empty text. Debugging with Firebug shows it hits that last line and then just exits out of the script.

I should also note that I am new to MVC and jQuery, so I apologize in advance if I'm not doing things properly.

1

There are 1 best solutions below

0
On

This is incorrect syntax - $("#" + myid).val = (varempty); It should be - $("#" + myid).val(varempty);