Using jQuery To Disable ELement-CodePudding

I have code written in ColdFusion that produces a List of inputs coming from an SQL Query, The code is as below:

<cfquery datasource="#request.dsn#" name="getProdInfo">
        Select * from dbo.Lines,dbo.[Shift],dbo.operations 
        where lineID=#form.SELLINE# and ShiftID=#form.SELSHIFT#
</cfquery>
<cfoutput query="getProdInfo">
 <div class="control-group">
    <label for="Ops">#OperationName# </label>
     <input class="input-xlarge focused" id="prods" name="prod" placeholder="Enter Production" 
        type="number"  validate="integer"  />

  <select name="Test" id="test">
     <option>Option1</option>
     <option >Option2</option>  
 </select>
 </div>
<!--- Hidden Field--->
<input class="input-small focused" id="trgt" name="Target" value="580">
</cfoutput>

This code produces 6 input fields, 6 selects and 6 hidden target fields (for non CFers cfoutput loops over the result set). I want to perform a jQuery that if the input field is less that 70% of the target it should enable the Select Dropdown else keep it disabled. My jQuery is as follows

<script type="application/javascript">
    $('#prods').on('focusout', function(){
        var element1 = document.getElementById("prods").value;
        var element2 = document.getElementById("trgt").value;
        var calc = (element1/element2)*100
        if (calc<70){
            $("#test").attr('disabled','disabled')
        }
        
        });
</script>

The behavior is that when the first field is tested by the jQuery it disables the first select but does not apply to the other 5 selects.

I hope I've cleared my point. Help appreciated

CodePudding user response：

You can use .prop to set disabled to true or false. Added a link to the documentation.

$("#test").prop("disabled", true) -- disable
$("#test").prop("disabled", false) -- enable

https://learn.jquery.com/using-jquery-core/faq/how-do-i-disable-enable-a-form-element/

CodePudding user response：

Better just do it in vanilla JS and stop using jQuery lol it's 2021

element.disabled = true;
element.disabled = false;