css - HTML/AngularJS - How can I make the first name, last name, and email of this editable?

Question

This is a code snippet from the E-Com site we use, I do not have access to the JS, only HTML and CSS. Most of the fields need to be read only so they can only be updated from the address book. But all the fields are in a couple of lines, with line 4, below, containing everything but the country and state. Is there any way I can make only certain fields in that line ready only? Specifically everything but the First and last name, and the email.

Thank you, in advance.

Edit: I should also add that AngularJS gives me headaches and raises my blood pressure, so if the answer involves directives or some crazy angular stuff please be nice.

<div class="row-fluid" ng-repeat="field in delivery.RecipientsFields" 
     ng-hide="delivery.HideForDeliveryMethod() == 'true'">
    <div ng-class="{true : 'span8', false : 'span4'}[['AddressLine1', 'AddressLine2', 'AddressLine3','Email','PhoneNumber1'].indexOf(field._ServerTag) != -1]" 
         ng-show="field._Visible == 'true' || (field._ServerTag == 'RoomNumber' && delivery.showRoomNumberFieldForDeliveryMethod())">
        <label for="" ng-class="getRequiredClass(field._Required)" 
               ng-if="field._ServerTag != 'VATNumber' && field._ServerTag != 'RoomNumber'">{{field._DisplayName}}:</label>
        <!-- <label ng-show="field._Required">*</label> -->
        <input id="txt{{field._ServerTag + delivery.OrderAddressId}}"
               ng-if="field._ServerTag != 'VATNumber' && field._ServerTag != 'State_Province_Region' && field._ServerTag != 'Country' && field._ServerTag != 'RoomNumber'" 
               ng-model="field._FieldValue" type="text" name="" id="" placeholder="" class="span12" 
               value="{{field._FieldValue}}"
               ng-validate="{{field.Validate}}"
               ng-disabled="(delivery.DisableDeliveryAddressEdit_current && !IsRecipientFromAddressBook) || (delivery.DisableDeliveryAddressEdit_current && IsRecipientFromAddressBook && (!delivery.EnableChangingPersonNameOfaLockedAddress || (field._ServerTag != 'Email' && field._ServerTag != 'FirstName' && field._ServerTag != 'LastName' && field._ServerTag != 'MiddleName'))) || (delivery.useDedicatedAddressBook() && field._ServerTag != 'Email' && field._ServerTag != 'FirstName' && field._ServerTag != 'LastName' && field._ServerTag != 'MiddleName' && field._ServerTag != 'PhoneNumber1')" 
               maxlength="{{field._MaxCharacterLength}}" 
               readonly />

        <input id="txt{{field._ServerTag + delivery.OrderAddressId}}" 
               ng-if="field._ServerTag == 'State_Province_Region'"
               ng-hide="delivery.RecipientCountry.length && (field._DataSource | filter : {_OtherDataSourceKeys : delivery.RecipientCountry}).length" 
               ng-model="delivery.RecipientState_Province_Region" type="text" name="" id="" placeholder="" class="span12" 
               value="{{field._FieldValue}}" 
               ng-validate="{{field.Validate}}" 
               ng-disabled="delivery.DisableDeliveryAddressEdit_current || delivery.useDedicatedAddressBook()" 
               maxlength="{{field._MaxCharacterLength}}" 
               readonly />
        <select id="ddl{{field._ServerTag + delivery.OrderAddressId}}" 
                ng-if="field._ServerTag == 'Country'" 
                ng-model="delivery.RecipientCountry" 
                ng-options="option._Key as option._DisplayValue for option in field._DataSource" class="span12" 
                ng-change="CountryChanged(delivery)" 
                ng-disabled="delivery.DisableDeliveryAddressEdit_current || delivery.useDedicatedAddressBook()" 
                readonly >
        </select>
        <select id="ddl{{field._ServerTag + delivery.OrderAddressId}}" 
                ng-if="field._ServerTag == 'State_Province_Region'" 
                ng-show="delivery.RecipientCountry.length && (field._DataSource | filter : {_OtherDataSourceKeys : delivery.RecipientCountry}).length" 
                ng-model="delivery.RecipientState_Province_Region" 
                ng-options="option._Key as option._DisplayValue for option in field._DataSource | filter : {_OtherDataSourceKeys : delivery.RecipientCountry}" 
                class="span12" 
                ng-disabled="delivery.DisableDeliveryAddressEdit_current || delivery.useDedicatedAddressBook()" 
                ng-validate="{{field.Validate}}" 
                readonly >
         </select>
                    
        <label for="" ng-class="getRequiredClass(true)" ng-if="field._ServerTag == 'RoomNumber' && (field._Visible == 'true' || delivery.showRoomNumberFieldForDeliveryMethod())">{{field._DisplayName}}:</label>
        <input id="txt{{field._ServerTag + delivery.OrderAddressId}}" 
               ng-if="field._ServerTag == 'RoomNumber' && (field._Visible == 'true' || delivery.showRoomNumberFieldForDeliveryMethod())" 
               ng-model="field._FieldValue" type="text" 
               name="" placeholder="" class="span12" 
               value="{{field._FieldValue}}" 
               ng-validate="{{field.Validate}}"
               maxlength="{{field._MaxCharacterLength}}" />
    </div>
</div>

question from:https://stackoverflow.com/questions/65943853/html-angularjs-how-can-i-make-the-first-name-last-name-and-email-of-this-edi

Answer 1

The <select> element does not support the readonly attribute. Instead, use the disabled attribute for <select> elements.

For more information, see

• MDN HTML Attributes Reference -- readonly attribute
• MDN HTML Attributes Reference -- disabled attribute
• MDN HTML Elements Reference -- <select> element