javascript - Magento:根据所选国家/地区隐藏/显示输入字段

Question

我想隐藏/显示||根据 magento 结账页面中所选国家/地区禁用/启用输入字段。我尝试将这段代码与 magento 分开，它工作得很好，但是当我将它应用到我的 magento 中时，它不起作用。我刚刚从 IWD 结账扩展中编辑了 billing.phtml，而没有从 magento 核心中编辑任何内容。

这是 JavaScript:

$(function() {
var $cid = $(document.getElementById("billing:country_id")), // Country ID in magento
$custom = $(document.getElementById("billing:custom")); //my custom input field

$cid.change(function() {
    if ($cid.val() == 'US') {
        $custom.removeAttr('disabled');
        alert('working1');
    } else {
        $custom.attr('disabled', 'disabled').val('');
        alert('working2');
    }
}).trigger('change');
});

以下是 IWD/Magento 的示例帐单表单模板:

<li class="fields">
     <label for="billing:country_id" class="required"><em>*</em><?php echo $this->__('Country') ?></label>
     <div class="input-box">
         <?php echo $this->getCountryHtmlSelect('billing') ?>
     </div>
</li>
<li class="fields">
      <label for="billing:custom" class="required"><em>*</em><?php echo $this->__('Custom Field') ?></label>
      <div class="input-box">
            <input type="text" name="custom[custom]" value="<?php echo $this->htmlEscape($this->getQuote()->getCustom()) ?>" title="<?php echo $this->__('Custom Field') ?>" class="input-text custom_id" id="billing:custom" />
       </div>
 </li>

国家选择getCountryHtmlSelect函数是一个内置的法师函数:

public function getCountryHtmlSelect($type)
{
    $countryId = $this->getAddress()->getCountryId();
    if (is_null($countryId)) {
        $countryId = Mage::helper('core')->getDefaultCountry();
    }
    $select = $this->getLayout()->createBlock('core/html_select')
        ->setName($type.'[country_id]')
        ->setId($type.':country_id')
        ->setTitle(Mage::helper('checkout')->__('Country'))
        ->setClass('validate-select')
        ->setValue($countryId)
        ->setOptions($this->getCountryOptions());
    if ($type === 'shipping') {
        $select->setExtraParams('onchange="if(window.shipping)shipping.setSameAsBilling(false);"');
    }

    return $select->getHtml();
}

Answer 1

<input id="billing:country_id"></input> 
<input id="billing:custom" disabled="disabled;"></input>

代码

$(function() {
var $cid = $(document.getElementById("billing:country_id"));
$custom = $(document.getElementById("billing:custom")); 

$cid.change(function() {
    if ($cid.val() == 'US') {
        $custom.prop('disabled', false);
        console.log('working1');
    } else {
        $custom.prop('disabled', true).val("");
        console.log('working2');
    }
}).trigger('change');
});

http://codepen.io/anon/pen/dMqYgK?editors=1011