CODEWITHSUNDEEP
javascriptjquery
Ravi Kumar
Ravi Kumar

Reputation: 119

make an input text into read only when one value is selected from drop down list using jquery

i have one select box there in that options are,

if you select 'NONE' the all text box should be editable. if you select 'current' the class="current" those text box should be editable and remaining should be only readonly. similarly same like to future also. When i select future the future text boxes should be editable and remaining should be readonly

$('#cognizant').change(function(){
    if(this.value == ""){
        $('.current').prop('readonly',true);
     } else{
      $('.current').prop('readonly',false);
   }
 }).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="curator">
  <tbody id="tableToModify">
    <tr>
        <td>
          <select id="cognizant" class="discount-type" >
            <option value="">none</option>
            <option value="1">current</option>
            <option value="2">future</option>
            
          </select>
        </td>
        <td>
<input type="text"   id="clientbi" class="current"/>
<input type="text"   id="cognizantbi" class="current"/>
<input type="text"  id="futurevsm" class="future" />
 <input type="text"  id="futuresymbols" class="future" />
        </td>
      </tr>
    </tbody>
  </table>

Upvotes: 0

Views: 1194

Answers (4)

Valeklosse
Valeklosse

Reputation: 1017

As an alternative approach, with a small change in the html. You add a class name of 'none' to all the input fields, which is the same as option 1.

<table id="curator">
  <tbody id="tableToModify">
    <tr>
        <td>
          <select id="cognizant" class="discount-type" >
            <option value="">none</option>
            <option value="1">current</option>
            <option value="2">future</option>

          </select>
        </td>
        <td>
           <input type="text"   id="clientbi" class="current none"/>
           <input type="text"   id="cognizantbi" class="current none"/>
           <input type="text"  id="futurevsm" class="future none" />
           <input type="text"  id="futuresymbols" class="future none" />
        </td>
      </tr>
    </tbody>
  </table>

Then the jQuery to be like this. Comments explain approach.

$(function(){

    $('#cognizant').on("change", function() {
        //Set all text boxes to readonly
        $("input[type='text']").prop("readonly", true);

        //Select the option text, based on its value.
        var text = $("#cognizant option[value='"+$(this).val()+"']").text();

        //Set the property readonly to false on the selected class. 
        $("."+text).prop('readonly', false);
   }).trigger("change");
});

Upvotes: 0

Eduardo
Eduardo

Reputation: 518

Let's change your javascript code only.

We need to use jQuery's change() function (documentation) and then validate the selected option.

The final code:

$('#cognizant').change(function(){

  var value = $(this).val();

  if(value == ''){
    // NONE
    $('#curator input[type="text"]').removeAttr('readonly');
  }
  else if(value == '1'){
    // CURRENT
    $('#curator input[type="text"]').attr('readonly', true);
    $('#curator .current').removeAttr('readonly');
  }
  else if(value == '2'){
    // FUTURE
    $('#curator input[type="text"]').attr('readonly', true);
    $('#curator .future').removeAttr('readonly');
  }

});

See it in action: https://jsfiddle.net/x5fdLqff/4/

Upvotes: 1

Binit Ghetiya
Binit Ghetiya

Reputation: 1979

 <table id="curator">
      <tbody id="tableToModify">
        <tr>
            <td>
              <select id="cognizant" class="discount-type" >
                <option value="">none</option>
                <option value="current">current</option>
                <option value="future">future</option>

              </select>
            </td>
            <td>
    <input type="text"   id="clientbi" class="current myinputs"/>
    <input type="text"   id="cognizantbi" class="current myinputs"/>
    <input type="text"  id="futurevsm" class="future myinputs" />
     <input type="text"  id="futuresymbols" class="future myinputs" />
            </td>
          </tr>
        </tbody>
      </table>

      <script>
    $('#cognizant').change(function(){
        var type = $("#cognizant").val();
      $( ".myinputs" ).each(function( index ) {
        $( this ).prop('readonly', false);
      });
      if(type != ""){
        $("."+type).each(function( index ) {
          $( this ).prop('readonly', true);
        });
      }
  });
</script>

I have change option value in select box and made little change in javascript code.

hope it works for you.

Upvotes: 0

br3t
br3t

Reputation: 1658

$('#cognizant').change(function(){
    switch(this.value) {
    case "":
        $('.current').prop('readonly',false);
      $('.future').prop('readonly',false);
    break;
    case "1":
        $('.current').prop('readonly',false);
      $('.future').prop('readonly',true);
    break;
    case "2":
        $('.current').prop('readonly',true);
      $('.future').prop('readonly',false);
    break;
  }
 }).change();

Upvotes: 0

Related Questions