Question

Hi I am trying to get this JavaScript work for me.

Can any one help me with this.

When user clicks the Check box the next text box should disable,
if unchecked then enable.

selectors are working fine when I debug scrip in IE9 developer tool.

function is running fine as needed.

<input id="RefillNeeded10" name="RefillasNeeded" type="checkbox" value="true">
<input type="text" size="5" id="RefillTB10," name="Refills">

---

$('input[type="checkbox"][name^="RefillasNeeded"]').click(function () {
var num = $(this).attr('id').replace("RefillNeeded", "");
if ($('input[type="checkbox"][id="RefillNeeded' + num + '"]').attr("checked")) {
  $('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", true);
                   }
  else {
  $('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", false);
   }
 });

but $('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", true);
this is not creating the attribute disable.

I have this listed here for convenience.

Answer 1

Your selector isn’t matching any elements. It looks like you have a typo in your HTML – there is a trailing , in the id of the text box. Remove the comma from your id attribute, and it should work. http://jsfiddle.net/gilly3/KJVCa/13/

---

By the way, you don’t need that big long selector to get the checkbox and test if it is checked. You already have a reference to it as this. And you can just check its checked property:

if (this.checked)

While we’re at it, why not really simplify things. You don’t need to parse the id, just get the next element (assuming your textbox always follows your checkbox). You don’t need an if, just use the boolean directly. Your code can be shrunk down to just this:

$("input[type=checkbox][name^=RefillasNeeded]").click(function () {
    $(this).next().attr("disabled", this.checked);
});

See it here: http://jsfiddle.net/gilly3/KJVCa/15/