memo

custom.txt

1. 剛才的 script 替換為這段

var $lis = $('.cd-pricing-list .cd-form .cd-pricing-features li'),
  $inps = $('.cd-pricing-list .cd-form .cd-pricing-features li input');
$inps.on('blur', function () {
  if (this.value || this.value=='0') {
    $inps.not(this).val('').attr('readonly', true);
    $lis.not($(this).closest('li')).addClass('inp-restrict')
      .each(function () {
        var _inp = $(this).find('input').eq(0),
          _mark = $(this).find('.crossmark').eq(0);
        _mark.css('right',
          parseInt($(this).css('padding-right'))+parseInt(_inp.css('padding-right')));
        _mark.css('bottom',
          parseInt($(this).css('padding-bottom'))+parseInt(_inp.css('padding-bottom')));
      });
    $(this).attr('readonly', false)
      .closest('li')
      .addClass('inp-done')
      .each(function () {
        var _inp = $(this).find('input').eq(0),
          _mark = $(this).find('.checkmark').eq(0);
        _mark.css('right',
          parseInt($(this).css('padding-right'))+parseInt(_inp.css('padding-right')));
        _mark.css('bottom',
          parseInt($(this).css('padding-bottom'))+parseInt(_inp.css('padding-bottom')));
      });
  } else if (!$(this).attr('readonly')) {
    $lis.removeClass('inp-done');
    $lis.removeClass('inp-restrict');
    $inps.attr('readonly', false);
  }
});

2. 在每一個 input 之後加上這兩行

<i class="checkmark">&#x2714;</i>
<i class="crossmark">&#x2716;</i>

3. 在 CSS 中加入這幾個規則

.cd-pricing-list .cd-form .cd-pricing-features li {
	position: relative;
}
.cd-pricing-list .cd-form .cd-pricing-features li .checkmark,
.cd-pricing-list .cd-form .cd-pricing-features li .crossmark {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 1;
	display: none;
}
.cd-pricing-list .cd-form .cd-pricing-features li.inp-done .checkmark {
	color: green;
	display: block;
}
.cd-pricing-list .cd-form .cd-pricing-features li.inp-restrict .crossmark {
	color: red;
	display: block;
}