Using uniForm and trying to disable input - jquery-ui

Question

I have a form that I have 2 different sets of formfields that are utilized depending on a select box value. The problem I am having is when I try to disable the irrelevant input fields, I the disabled attribute comes up as: disabled="" instead of disabled="disabled" here is the code I am using. It is a fairly complicated form so I will use the relevant fields so I can try to keep it as simple as possible for you all. If you think something is missing... please let me know if you need to see more.
<cfform id="entry-form" ACTION="index-10.cfm?Company" name="send" class="uniForm">
<div class="ctrlHolder"><label for="" style="display:none"><em>*</em>Builder or Individual</label>
<cfselect name="select1" id="select1">
<option value="" <cfif Individual is "">selected="selected"</cfif>>Who is this Case for? (choose one)</option>
<option value="0"<cfif Individual is 1>selected="selected"</cfif>>An Individual Home Owner</option>
<option value="1"<cfif Individual is not 1 and Individual is not "">selected="selected"</cfif>>A Builder</option>
</cfselect>
<p class="formHint">A selection is required</p>
</div>
<!--- this is for individual home owner. --->
<div class="hide" id="hide1">
<div class="ctrlHolder"><label for="" style="display:none"><em>*</em>First name</label>
<cfinput type="text"
name="FirstName"
id="FirstName"
data-default-value="Enter your first name"
size="35"
class="textInput required validateAlpha"
maxlength="50"
value="#FirstName#">
<p class="formHint">First Name is required</p>
</div>
</div>
<div class="hide" id="hide2">
<div class="ctrlHolder"><label for="" style="display:none"><em>*</em>Builder Name</label>
<cfinput type="text" id="builder"
name="BuilderName"
data-default-value="Type a builder's name"
size="35"
class="textInput required"
value="" />
<p class="formHint">Builder's name is required</p>
<cfinput id="builder_hidden" name="BuilderID" type="hidden" value="" />
<cfinput id="builder_hidden_plan" name="PlanID" type="hidden" value="" />
</div>
</div>
</cfform>
<script>
$(document).ready(function(){
$("#select1").change(function(){
if ($(this).val() == "1" ) {
$("#hide2").slideDown("fast"); //Slide Down Effect
$("#hide1").slideUp("fast");
$("#FirstName").prop("disabled", true);
$("#builder").prop("disabled", false);
} else if ($(this).val() == "0" ){
$("#hide1").slideDown("fast"); //Slide Down Effect
$("#hide2").slideUp("fast");
$("#FirstName").prop("disabled", false);
$("#builder").prop("disabled", true);
}
});
</script>
I am using:
jquery-1.9.1.js
jquery-ui-1.10.1.custom.js
uni-form-validation.jquery.js

Answer 1

I found the issue. The disabled property was being added. It was the required class that was keeping this from working. I added removeClass and addClass methods in order to correct this.

Answer 2

Please change the jQuery 'prop' to 'attr' & check the below script once it works fine.....
<script type="text/javascript">
$(document).ready(function(){
$("#select1").change(function(){
if ($(this).val() == "1" ){
$("#hide2").slideDown("fast"); //Slide Down Effect
$("#hide1").slideUp("fast");
$("#firstname").attr("disabled", "disabled");
$("#builder").attr("disabled", false);
}
else if ($(this).val() == "0" ){
$("#hide1").slideDown("fast"); //Slide Down Effect
$("#hide2").slideUp("fast");
$("#firstname").attr("disabled", false);
$("#builder").attr("disabled", "disabled");
}
});
});