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我们不仅需要类，还需要属性。

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