Как включить текстовое поле, когда один из радио-кнопки щелкают

Question

У меня есть 4 radio buttons и textbox в HTML-страницу с помощью начальной загрузки 3, я хочу сделать textbox отключена по умолчанию и включить его, когда переключатель EnterRange является enabled.Any предложения?

<script type="text/javascript"> 
    $(".radioBtn").click(function() { 
    $("#dist").attr("disabled", true); 
     if ($("input[name=optradio]:checked").val() == "EnterRange") { 
      $("#txtbox").attr("disabled", false); 
     } 
    }); 
</script> 

код HTML:

<div class="customradio"> 
    <input class="radioBtn" type="radio" id="5" name="optradio" value="5" checked="checked"> 
    <label for="5">5 Km</label> 
</div> 
<div class="customradio"> 
    <input class="radioBtn" type="radio" id="10" name="optradio" value="10"> 
    <label for="10">10 Km</label> 
</div> 
<div class="customradio"> 
    <input class="radioBtn" type="radio" id="15" name="optradio" value="15"> 
    <label for="15">15 Km</label> 
</div> 
<div class="customradio"> 
    <input class="radioBtn" type="radio" id="EnterRange" name="optradio" value="EnterRange"> 
    <label for="EnterRange">Enter Range</label> 
</div> 
<div> 
    <input type="text" id="dist" name="txtbox" disabled="disabled"> <label>Km</label> 
</div> 

Answer 1

У вас есть только одна ошибка здесь

if ($("input[name=optradio]:checked").val() == "EnterRange") { 
$("#dist").attr("disabled", false); //selector is wrong. 
} 

Вы просто положить name, как selector На самом деле ваш код идеален, вам нужно изменить только этот selector как $("#txtbox") к $("#dist")

$(".radioBtn").change(function() { 
    $("#dist").attr("disabled", true); 
    alert($("input[name=optradio]:checked").val()) 
     if ($("input[name=optradio]:checked").val() == "EnterRange") { 
      $("#dist").attr("disabled", false); 
     } 
    }); 

Answer 2

Вы можете сделать это просто JQuery. Попробуйте следующие фрагменты:

Html:

<div class="customradio"> 
    <input class="radioBtn" type="radio" id="EnterRange" name="optradio" value="EnterRange"> 
    <label for="EnterRange">Enter Range</label> 
</div> 
<div> 
    <input type="text" id="dist" name="txtbox"> <label>Km</label> 
</div> 

для JQuery 1.6+, Вы можете использовать функцию .prop():

$(document).ready(function() { 
     $("#dist").prop('disabled', true); 
     $("#EnterRange").click(function() { 
      $("#dist").prop('disabled', false); 
     }); 
}); 

JQuery 1,5 и ниже, The .attr и .remoceAttr сделать то же самое:

$(document).ready(function() { 
    $("#dist").attr("disabled","disabled"); 
    $("#EnterRange").click(function() { 
     $("#dist").removeAttr("disabled"); 
    }); 
}); 

Answer 3

Ваш код будет работать нормально только проверить ID вы используете

<script type="text/javascript"> 
    $(".radioBtn").click(function() { 
    $("#dist").attr("disabled", true); 
     if ($("input[name=optradio]:checked").val() == "EnterRange") { 
      $("#txtbox").attr("disabled", false); 
     } 
    }); 
</script> 

использование

<script type="text/javascript"> 
    $(".radioBtn").click(function() { 
    $("#dist").attr("disabled", true); 
     if ($("input[name=optradio]:checked").val() == "EnterRange") { 
      $("#dist").attr("disabled", false); 
     } 
    }); 
</script>