使用jQuery从下拉列表中选择一个值时，将输入文本设置为只读

Question

i have one select box there in that options are,

• none
• current
• future

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> 

Answer 1

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/

Answer 2

$('#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();

Answer 3

 <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.

Answer 4

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");
});