disable/renable input field base on radio checkbox

Question

I wrote below code but there's no respond I switch my radio box. I want to disable unchecked radio checkbox.

<input class="radio-checkbox" type="radio" name="choice" value="custom_msg" checked>Custom Message :<br/>
<input style="width:200px" placeholder="your msg" type="text" id="custom_text"/>

<br/>

<input class="radio-checkbox" type="radio" name="choice" value="custom_img">Image :<br/>
<input style="width:200px" placeholder="an image url" type="text" id="custom_img"/>

my js

$(".radio-checkbox").change(function() {
    if(this.checked) {
        $(this).next().$("input").prop('disabled', true);
    }
});

check that http://stackoverflow.com/questions/426258/checking-a-checkbox-with-jquery — gmetax, Nov 12 '14 at 13:07
Your problem here was the part `next().$("input")`, which was not working (not a function error was logged). Instead I used `next().next()` and it worked. Your `
`s were immediate siblings. — Krzysztof Jabłoński, Nov 12 '14 at 13:14

score 2 · Accepted Answer · answered Nov 12 '14 at 13:08

2

You are not using correct .next(). I think you can sum it up to this using .nextAll():

$(".radio-checkbox").click(function() {
  $("input:text").prop("disabled", true);
  $(this).nextAll("input").eq(0).prop('disabled', !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="radio-checkbox" type="radio" name="choice" value="custom_msg" checked>Custom Message :
<br/>
<input style="width:200px" placeholder="your msg" type="text" id="custom_text" />
<br/>
<input class="radio-checkbox" type="radio" name="choice" value="custom_img">Image :
<br/>
<input style="width:200px" placeholder="an image url" type="text" id="custom_img" disabled />

answered Nov 12 '14 at 13:08

Alex Char

32,879
9
49
70

Why not just `.next('input')` rather than `.nextAll('input').eq(0)`? – Anthony Grist Nov 12 '14 at 13:11
Because `next()` isn't input but a `
` :) For example `$(this).next().next()` could work. – Alex Char Nov 12 '14 at 13:12
That's what I get for not reading all of the HTML! Not obvious in the original code because it's just on the end of the line, though I notice you've moved them onto separate lines in your answer. That said, looks like there's a connection between the `value` on the radio buttons and the `id` on the text boxes, so could use an ID selector rather than relying on DOM traversal. Would be more resistant to layout changes. – Anthony Grist Nov 12 '14 at 13:15
Kinda nice idea indeed but not both `text`/`radio` has the same id/value :S Would be nice though – Alex Char Nov 12 '14 at 13:23
I'm just going to give up, I clearly can't read properly today. – Anthony Grist Nov 12 '14 at 13:24

score 0 · Answer 2 · answered Nov 12 '14 at 13:10

Try this : Your question and jsfiddle confused me, do you want to disable input box when select radio button or do you want reverse of it.

Below is code to disable input box for checked radio button

$(document).ready(function(){

   $(".radio-checkbox").click(function() {
     $(this).siblings("input[type=text]").removeProp("disabled");          
     $(this).next().next("input[type=text]").prop('disabled', true);
  });

});

DEMO

And this code will do the reverse, this will enable input for checked radio button

$(document).ready(function(){

       $(".radio-checkbox").click(function() {
         $(this).siblings("input[type=text]").prop("disabled",true);          
         $(this).next().next("input[type=text]").removeProp('disabled');
      });

    });

DEMO

score 0 · Answer 3 · answered Nov 12 '14 at 13:17

Try this in your js :

$(document).ready(function(){

    $(".radio-checkbox").change(function() {
       if (this.value == 'custom_msg') {
            $("#custom_img").prop('disabled', true);
            $("#custom_text").prop('disabled', false);
       }
       else if (this.value == 'custom_img') {
            $("#custom_text").prop('disabled', true);
            $("#custom_img").prop('disabled', false);
       }
    });

});

Updated Fiddle

disable/renable input field base on radio checkbox

3 Answers3