how do disable/remove Zip Code for specific country in magento 2

Question

How can i disable/remove Zip Code for specific country in magento 2

For example if some one select UAE than Zip Code field should remove or disable else it should visible.

Answer 1

If you want to remove the Zip Code based on country selection, then firstly you can make zip code optional for this country from backend (i.e UAE), from store > config > general > Zip/Postal Code is Optional for and un-select your country which you want.

then you can override below javascript in your custom module

magento/module-ui/view/base/web/js/form/element/post-code.js,

By adding

app/code/YOURVENDOR/YOURMODULE/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            "Magento_Ui/js/form/element/post-code": 'YOURVendor_YOURMODULE/js/form/element/post-code'
        }
    }
};

Now copy post-code into your module directory

app/code/YOURVENDOR/YOURMODULE/view/frontend/web/js/form/element/post-code.js

With below javascript,

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @api
 */
define([
    'underscore',
    'uiRegistry',
    './abstract'
], function (_, registry, Abstract) {
    'use strict';

    return Abstract.extend({
        defaults: {
            imports: {
                update: '${ $.parentName }.country_id:value'
            }
        },

        /**
         * @param {String} value
         */
        update: function (value) {
            var country = registry.get(this.parentName + '.' + 'country_id'),
                options = country.indexedOptions,
                option;

            if (!value) {
                return;
            }

            option = options[value];

            if (option['is_zipcode_optional']) { // from here custom code start 
                    // if country is optional then make it hide,
                this.hide();                
            } else {
                this.validation['required-entry'] = true;
            }

            this.required(!option['is_zipcode_optional']);
        }
    });
});

After doing this, perform cache:flush and static-content:deploy

EDIT

---

If you are using custom theme then you can simply copy post-code.js into your custom theme path, but this js path should be,

app/design/yourvendor/yourthemename/Magento_Ui/view/base/web/js/form/element/

Answer 2

I have disabled the field by using jquery

first I made "zip code" field optional from admin for UAE.

then added a js file in theme Magento_Theme/layout/default_head_blocks.xml

<link src="js/disable_zip_code.js" />

then placed the js file in /web/js/disable_zip_code.js

and write the following code in js file

    require(['jquery', 'jquery/ui'], function($){ 

  $(document).ready(function(){

    $( ".country #country" ).change(function() {

      if($(this).val()=="AE" || $(this).val()=="ae" ){
        $(".zip #zip").attr("disabled","");
      }
      else{
        $(".zip #zip").removeAttr("disabled");
      }
      });


    //for checkout fields

    $("body").on("change","select[name='country_id']", function(){

      if($( "[name='country_id']" ).val()=="AE" || $( "[name='country_id']" ).val()=="ae" ){
        $("[name='postcode']").attr("disabled","");
      }
      else{
        $("[name='postcode']").removeAttr("disabled");
      }
      });


  });

});

now its working

Answer 3

Work for me

<item name="disabled" xsi:type="boolean">true</item>