OC 3.x 模板中的条件 .js 函数

Question

老实说，希望就目前的情况得到一些想法 - 我在 .js 方面很差，所以希望你能以正确的方式介绍我。

复选框（如果选中复选框则内容可见，否则隐藏）：

<input type="checkbox" id="myCheck"  onclick="myFunction()"> {{ text_company_purchase }} 
  <div id="text" style="display:none">
    <div class="form-group">
        <label class="control-label" for="input-payment-company">{{ entry_company }}</label>
        <input type="text" name="company" value="{{ company }}" placeholder="{{ entry_company }}" id="input-payment-company" class="form-control" />
    </div>
    <div class="form-group">
        <label class="control-label" for="input-payment-company_code">{{ entry_company_code }}</label>
        <input type="text" name="company_code" value="{{ company_code }}" placeholder="{{ entry_company_code }}" id="input-payment-company_code" class="form-control" />
    </div>
    <div class="form-group">
        <label class="control-label" for="input-payment-vat_code">{{ entry_vat_code }}</label>
        <input type="text" name="vat_code" value="{{ vat_code }}" placeholder="{{ entry_vat_code }}" id="input-payment-vat_code" class="form-control" />
    </div>
</div>

和.js函数代码：

        <script>
    function myFunction() {
      var checkBox = document.getElementById("myCheck");
      var text = document.getElementById("text");
      if (checkBox.checked == true){
        text.style.display = "block";
    $('.payment-company_code input[name=\'company_code\']').addClass('required');
      } else {
         text.style.display = "none";
$('.payment-company_code input[name=\'company_code\']').removeClass('required');
      }
    }
    </script>

可能我使用了错误的语法来检查是否提到了必填字段。除非我需要在控制器中添加对该字段的一些条件检查。感谢任何意见和想法。谢谢！

Answer 1

您输入的是id="input-payment-company_code"，所以jQuery中的正确判断是$('#input-payment-company_code')，其中#代表ID。

<script>
  function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("text");
    if (checkBox.checked == true){
      text.style.display = "block";
      $('#input-payment-company_code').addClass('required');
    } else {
      text.style.display = "none";
      $('#input-payment-company_code').removeClass('required');
    }
  }
</script>

不过，要将输入设置为 required，我们不仅需要 class，还需要属性。

<script>
  function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("text");
    if (checkBox.checked == true){
      text.style.display = "block";
      $('#input-payment-company_code').addClass('required');
      $('#input-payment-company_code').prop('required',true); // this will add the attribute `required`
    } else {
      text.style.display = "none";
      $('#input-payment-company_code').removeClass('required');
      $('#input-payment-company_code').prop('required',false); // this will remove the attribute `required`
    }
  }
</script>

OC 3.x 模板中的条件 .js 函数

Conditional .js function in OC 3.x template

javascript

php

opencart