Magento:根据选定的国家/地区隐藏/显示输入字段

时间:2016-04-25 10:34:31

标签: javascript html magento

我想隐藏/显示||在magento checkout页面中根据所选国家/地区禁用/启用输入字段。我尝试将此代码与magento分开并且它完美地工作但是当我在我的magento中应用它时,它不起作用。我刚从IWD checkout扩展编辑了billing.phtml,而没有编辑magento core。

这是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>

Country Select getCountryHtmlSelect函数是一个内置的mage函数:

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();
}

1 个答案:

答案 0 :(得分: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