当从下拉列表中选择一个值时，jQuery将输入文本变为只读

Question

I have my html markup is something like this

<table id="sales-product-details">
  <tbody id="tableToModify">
    <tr>
        <td>
          <select id="prd_dtype1" class="discount-type" name="prddtype[]">
            <option value="">none</option>
            <option value="1">discount type 1</option>
            <option value="2">discount type 2</option>
            <option value="3">discount type 3</option>
          </select>
        </td>
        <td>
          <input type="text" class="dicount-price" onkeyup="calprice2(this.value,'1');" id="prd_damount1" name="prddamount[]">
        </td>
      </tr>
    </tbody>
  </table>

Now here I want in jQuery that when I will select none from the dropdown list of discount type then the input text field for discount price will be read only and when I will select any value other then none then the input text field for discount price will be turn into input area( no read only ). Any help and suggestions will be really appreciable. Thanks..

Answer 1

use select change() event to get the selected value and prop() to change the readonly property of input

 $('#prd_dtype1').change(function(){
    if(this.value == ""){
        $('#prd_damount1').prop('readonly',true);
     } else{
      $('#prd_damount1').prop('readonly',false);
   }
 }).change(); //<--- calling the change event here to make sure change event  is called as soon as the document is ready ...

OR The easy way (without the conditions)

 $('#prd_dtype1').change(function(){
    $('#prd_damount1').prop('readonly',!this.value);
 }).change();

and just incase if you need the input value to be empty when none is selected then you can use

 $('#prd_damount1').val('');

inside the if condition of first answer.

fiddle here

Answer 2

Try

$('#sales-product-details').on('change', '.discount-type', function(){
    var $this = $(this), val = $this.val();
    $this.closest('tr').find('.dicount-price').prop('readOnly', !val)
})

Demo: Fiddle

Answer 3

$("#prd_dtype1").change(function(){

   if($(this).val()==""){
      $(".dicount-price").attr("readonly",true);

   }else{
       $(".dicount-price").removeAttr("readonly");
}
});

Answer 4

$("#prd_dtype1").change(function(){

   if( $(this).val() == '' ){
      $("#prd_damount1").attr("readonly",false);
   }else{
       $("#prd_damount1").attr("readonly",true);
   }
});

Check Js Fiddle http://jsfiddle.net/rGMKK/3/

Answer 5

$(function () {

      $("#prd_damount1").attr("disabled", "disabled");


      $("#prd_dtype1").on("change", function () {

          console.log($(this).val());
          if ($(this).val() === "") {

              $("#prd_damount1").attr("disabled", "disabled");


          } else {

              $("#prd_damount1").removeAttr("disabled");


          }

      });


  });