复选框选中，下载文件，更改文本并提交

Question

我有一个复选框“JSFiddle”当用户勾选其中一个复选框时，它会打开一个新窗口，一旦单击复选框按钮，用户就可以查看下载的 PDF。然后这会禁用下载功能，因此当用户再次勾选复选框按钮时，它会激活提交按钮。

我遇到的麻烦是当用户单击terms-blockdiv 中的任何内容时，会下载 PDF。最初我想要它什么时候用户单击文本“条款和条件”它会打开 PDF，一旦打开 PDF，文本会更改为“我同意带有勾号的条款”，激活提交按钮......可以这样做了

 <div class="terms-block">
    <input type="checkbox" id="terms-agreed" class="form-terms" name="agreed" value="terms">
  <label class="terms-view" for="terms">I agree to the terms and conditions</label>
 </div>

$(function() {
      var checkboxes = $("#terms-agreed"),
      submitButt = $("input[type='submit']");
      enableSub(submitButt );
      checkboxes.on("click",function() {
        enableSub(submitButt );
        if (this.checked) window.open('{site_url}downloads/resellers/Standard_Terms_and_Conditions.pdf');
    });
});

Answer 1

你应该做这样的事情：

• 使用带有一些 id 的文本“条款和条件”添加标签
• 在一个 div 中，某个类的 css 设置为 display:none 将复选框和标签放在“我同意条款和条件”。
  • 将属性 disabled 设置为 true 的按钮，当用户单击“我同意 (...)”文本时，此按钮将变为启用。

代码可能如下所示：

 $(function() {
     $("#btnDownload").attr("disabled",true);
     $("#terms_and_conditions").on("click",function(){ 		/*window.open('{site_url}downloads/resellers/Standard_Terms_and_Conditions.pdf');*/
     $("#div_agree").show();
     });
     $("#terms-agreed").on("click",function(){
         if($(this).prop("checked"))
             $("#btnDownload").attr("disabled",false);
         else
             $("#btnDownload").attr("disabled",true);
     });
    });

.terms_link{
    cursor:pointer;
}
#div_agree{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Button should be enabled if at least one checkbox is checked</h1>

<div class="terms-block">
    <label id="terms_and_conditions" class="terms_link">Click to see terms and conditions</label><br/>
    <div id="div_agree">
                                    <input type="checkbox" id="terms-agreed" class="form-terms" name="agreed" value="terms">
                                    <label class="terms-view" for="terms">I agree to the terms and conditions</label>
                                </div>        
                                </div>
    <br/>
    <button type="button" id="btnDownload">Download</button>

只需根据您的要求进行调整

我评论了 window.open 行。

希望对你有帮助。