Question

I want to enable all textbox if a condition is matched. There is a drop-down containing YES/NO as an option. If yes is selected then I want to disable some textbox again but it's not working. I used this code to enable all textbox:

$(':input').removeAttr('disabled');

After that, i used this code if Yes is selected from the drop-down.

$(document).ready(function() {
    var n = $("#pharmacy_pur").val();
    if(n == "YES")
    {
         $('#pharmacy_amount').attr("disabled", "disabled");
    }
});

But it's not working. Anyone suggest me how to solve this problem. where i want to enable all textbox and if a dropdown option(YES) is selected then disable some of them. Here is html part:

<select name="pharmacy_pur" ID="pharmacy_pur">
 <option value="YES"<?php echo $r1 == "YES" ? " selected" : ""?>>YES</option>
<option value="NO"<?php echo $r1 == "NO" ? " selected" : "";?>>NO</option>
                                </select>
<input type="text" name="pharmacy_amount" ID="pharmacy_amount"/>

PHP Code :

$qu="select * from `scan_1` where P_no='1'";
$res=mysqli_query($con,$qu);
if(!$res || mysqli_num_rows($res)==0)
{
echo '<script>alert("Invalid:");</script>';
} 
$row=mysqli_fetch_assoc($res);
$r1=$row["Pharmacy_purchase"];

Answer 1

Use prop instead of attr to update DOM properties like disabled, checked, etc.

Replace

$(':input').removeAttr('disabled');

with

$(':input').prop('disabled', false);

And

if(n == "YES")
{
         $('#pharmacy_amount').attr("disabled", "disabled");
}

With

$('#pharmacy_amount').prop("disabled", ( n == "YES") );

Demo

$(document).ready(function() {
  var n = $("#pharmacy_pur").val();
  $(':input').removeAttr('disabled');

  $("#pharmacy_pur").change(function() {
    var n = $(this).val();
    $('#pharmacy_amount').prop("disabled", (n == "YES"));
  });

  $("#pharmacy_pur").change();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="pharmacy_pur" ID="pharmacy_pur">
   <option value="YES" class="1">YES</option>
   <option value="NO" class="1">NO</option>
</select>
<input type="text" name="pharmacy_amount" ID="pharmacy_amount" />

Answer 2

try this

$(document).ready(function() {
  $('#pharmacy_pur').on('change', function() {
    var n = $("#pharmacy_pur option:selected").text();
    if (n == "YES") {
      $('#pharmacy_amount').prop("disabled", true);
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="pharmacy_pur">
<option value="">--select--</option>
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
<br>
<input type="text" id="pharmacy_amount">

Answer 3

如果您想同时启用和禁用文本框，请在您启用js代码中放置循环，如：

$(document).ready(function() {
var n = '<?php echo $pr; ?>';
var r1='<?php echo $r5;?>';
if(n == "1")
{
    $(':input').removeAttr('readonly');
    $(':input').prop('disabled', false);
    if(r1=="NO")
    {
        $('#pharmacy_amount').attr("disabled", "disabled");
    }
 }

enable textbox with removeattr and want to disable again

3 个答案: