Pre populating the billing address at checkout

checkout.liquid

{% if customer and customer.addresses[0].country %}

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' | script_tag }}

<style>
.js .field--same-billing-address {
  display: none !important;
}

#checkout_billing_address_country, #checkout_billing_address_province {
  cursor: default;
  pointer-events:none;
}
</style>

<script>

$(document).ready(function() {
    $('.field--different-billing-address label').click();
    $("#checkout_billing_address_first_name").val('{{customer.addresses[0].first_name}}').prop('readonly', true);
    $("#checkout_billing_address_last_name").val('{{customer.addresses[0].last_name}}').prop('readonly', true);
    $("#checkout_billing_address_address1").val('{{customer.addresses[0].address1}}').prop('readonly', true);
    $("#checkout_billing_address_address2").val('{{customer.addresses[0].address2}}').prop('readonly', true);
    $("#checkout_billing_address_street").val('{{customer.addresses[0].street}}').prop('readonly', true);
    $("#checkout_billing_address_company").val('{{customer.addresses[0].company}}').prop('readonly', true);
    $("#checkout_billing_address_city").val('{{customer.addresses[0].city}}').prop('readonly', true);
    $("#checkout_billing_address_country").val('{{customer.addresses[0].country}}');
    $('#checkout_billing_address_province').append('<option value="{{customer.addresses[0].province}}">{{customer.addresses[0].province}}</option>');
    $("#checkout_billing_address_province").val('{{customer.addresses[0].province}}');
    $("#checkout_billing_address_zip").val('{{customer.addresses[0].zip}}').prop('readonly', true);
    $("#checkout_billing_address_phone").val('{{customer.addresses[0].phone}}').prop('readonly', true);
});

</script>
{% endif %}

I unhid .fielset--billing-address and h5 because the order wouldn't push through, and I wanted to see if there was something else up. There was. There was an error being thrown on the country:

Something else I noticed, is that the address at the top, with the checkbox, is still clickable. I don't know if it means it'll change it, or if it's just a visual thing (when all hidden, it doesn't matter) but I did modify line 7 to say:

.js .field.field--has-radio-button.field--same-billing-address,

For this result:

This will probably be the final view - but still throwing a "can't be blank" error.

The issue arose from adding the 'disabled' attribute to the country and province dropdowns. I've updated the gist to use the css pointer-events: none property instead.