enable textbox with removeattr and want to disable again

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

If You want to make textbox enable and disable at the same time then place loop inside your you enable js code like:

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