CODEWITHSUNDEEP
jqueryonclickswitch-statementradio-buttontextfield
M P
M P

Reputation: 915

Disable/enable text field with radio button (jQuery)

thanks for the past help. I am asking you again.

I want to have 2 radio buttons, which will change the state (Enabled/Disabled) of a text input.

I managed to make it come from disabled to enabled, but the problem is, that when you are switching between radio buttons, the text fields remains Enabled. And I do not want that.

html is in fiddle

$(document).ready( function(){
$('#casodhoda,#casodhoda1').prop('disabled',true);
$('input[type=radio][name=radioknof1]').click( function(){
$('#casodhoda,#casodhoda1').prop('disabled',true).val('');
$(this).next('span').children('wpcf7-form-control-wrap casodhoda').prop('disabled',false).triggerHandler('focus');
});
});

EDIT, modified a little the code, and on any way cannot get to working solution anymore.. I want the input fields to be disabled at load, and when user clicks on radio it should enable both and focus on first input field. The http://jsfiddle.net/wLFKD/3/ is here. Thanks!

Upvotes: 1

Views: 15339

Answers (3)

Abhilash
Abhilash

Reputation: 1610

Completely changed as per your sites html. This should work:

$(document).ready( function(){
  $('#casodhoda,#casprihoda').prop('disabled',true);
  $('input[type=radio][name=radioknof]').click( function(){
    $('#casodhoda,#casprihoda').prop('disabled',true).val('');
    $(this).next('span').children('.wpcf7-form-control').prop('disabled',false).triggerHandler('focus');
  });
});

There was a typo. If this doesn't work, the only other way I can think of is to... No, I think this will work.

Upvotes: 5

Chris X
Chris X

Reputation: 911

Why not, another solution that doesn't require Javascript?

// HTML
<form>
    <div>
        <input id="trigger-1" type="radio" name="radioknof" value="text1"/>
        <label for="trigger-1"><input type="text" id="input-1" /></label>
    </div>
    <div>
        <input id="trigger-2" type="radio" name="radioknof" value="text2"/>
        <label for="trigger-2"><input type="text" id="input-2" /></label>
    </div>
</form>​


// CSS, but just for styling, it doesn't have functional meaning :)
form {padding: 2%}
div {margin: 1em 0}
input[type='radio'] {cursor: pointer;}​

http://jsfiddle.net/nUWcF/

Upvotes: 0

st3inn
st3inn

Reputation: 1596

This markup:

<input type="radio" name="radioknof" value="text1"/>
<input type="text" id="id1" disabled="disabled"/><br/><br/>
<input type="radio" name="radioknof" value="text2"/>  
<input type="text" id="id2" disabled="disabled"/>​

and this script:

$('input[name="radioknof"]').on('click', function(){            
    $(this).next().prop('disabled',false).siblings('input[type=text]').prop('disabled',true);
});

results in what you want: http://jsfiddle.net/uefAK/

Upvotes: 0

Related Questions