CODEWITHSUNDEEP
javascriptjqueryhtmlcss
HelloWorld1
HelloWorld1

Reputation: 14108

Inactivate Input Text by Selecting Radio Button

If I select laptop radio button, the input text for computer should be not be enable to add any data and the the background should be grey instead of white.

Same logic if you select computer radio button and this time it would laptop.

I do not know how to create it.

Thanks!

<!DOCTYPE html>
<html>
<body>


<form>


    <div class="radio-group">

        <input id="laptop" type="radio" name="device" value="laptop" checked>
        <span class="radio-choice-name">
            <label for="laptop">laptop</label>
            <input type="text" value="" />
        </span>

        </BR>


        <input id="computer" type="radio" name="device" value="computer">
        <span class="radio-choice-name">
            <label for="computer">computer</label>
            <input type="text" value=""" />
        </span>         

    </div>


</form> 

</body>
</html>

Upvotes: 1

Views: 108

Answers (4)

Twinkle
Twinkle

Reputation: 111

I have done slight change to your html below, just added "class" attribute to input text and assigned value same as radio button values.

<!DOCTYPE html>
  <html>
   <body>
     <form>
       <div class="radio-group">
        <input id="laptop" type="radio" name="device" value="laptop" checked>
         <span class="radio-choice-name">
          <label for="laptop">laptop</label>
          <input class="laptop" type="text" value="" />
         </span>
       <br>
       <input id="computer" type="radio" name="device" value="computer">
       <span class="radio-choice-name">
        <label for="computer">computer</label>
        <input class="computer" type="text" value="" disabled/>
       </span>         
     </div>
   </form> 
 </body>
</html>

Here is the javascript:

<script type="text/javascript">
 $(function () {
    $('input:radio').on('change', function(){
               var value = $(this).val();
               $('.radio-group').find('input[type=text]').attr('disabled', 'disabled');
               $('.' + value).removeAttr('disabled');

       }
    );
});
</script>

I think you will find this very easy approach.

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181

You could do the following in jQuery. Let me know if you needed a pure javascript solution.

$(document).ready(function(){
    $(".radio-group").on("change", ":radio", function() {     
        $(":text").prop("disabled", true);
        $(this).next(".radio-choice-name").find(":text").prop("disabled", false);
    });
});
input[disabled] { background-color: #eee }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    
    
    <div class="radio-group">
        
        <input id="laptop" type="radio" name="sex" value="laptop" checked />
            <span class="radio-choice-name">
                <label for="laptop">laptop</label>
                <input type="text" value="" />
            </span>
            
            <br/>
        
        
            <input id="computer" type="radio" name="sex" value="computer" />
            <span class="radio-choice-name">
                <label for="computer">computer</label>
                <input type="text" value="" disabled />
            </span>         

    </div>


</form>

Upvotes: 0

Deepak Biswal
Deepak Biswal

Reputation: 4320

Try something like below using jQuery:

HTML

<form>


<div class="radio-group">

    <input id="laptop" type="radio" name="sex" value="laptop" checked>
    <span class="radio-choice-name">
        <label for="laptop">laptop</label>
        <input id="laptopVal" type="text" value="" />
    </span>

    </BR>


    <input id="computer" type="radio" name="sex" value="computer">
    <span class="radio-choice-name">
        <label for="computer">computer</label>
        <input id="computerVal"type="text" value=""" />
    </span>         

</div>

JAVASCRIPT

    $( document ).ready(function() {
    function handleClick(el) {
        $('input[type=text]').css('background-color', 'grey');
        $('input[type=text]').attr('readonly', 'true');
        $('#' + el.attr('id') + 'Val').css('background-color', 'white');
        $('#' + el.attr('id') + 'Val').attr('readonly', 'false');
    }
    handleClick($('#laptop'));

    $("input:radio").click(function() {
      handleClick($(this));
    });
   });

WORKING FIDDLE

Upvotes: 0

Arijit Mukherjee
Arijit Mukherjee

Reputation: 3875

give id's to the input's and then on selected radio buton disable the other input id for computer and enable the input for the laptop

$(document).ready(function(){
    $('input[type=radio][name=sex]').click(function(){
        var related_class=$(this).val();
        $('.'+related_class).prop('disabled',false);

        $('input[type=radio][name=sex]').not(':checked').each(function(){
            var other_class=$(this).val();
            $('.'+other_class).prop('disabled',true);
        });
    });
});

Simmilar Fiddle Example

Upvotes: 1

Related Questions