Question

我想创建一个提交按钮，单击一次会将其设计从“提交”更改为“我同意TOS”复选框，只有在选中后才会启动实际操作/功能。

有人有一个优雅的解决方案吗？

Answer 1

试试这个：

HTML：

<form>
  <div id="TOC">
      <label for="TOC_check">I agree to TOC</label>
      <input type="checkbox" id="TOC_check"/>
  </div>
  <input type="submit"/>
</form>

的CSS：

#TOC { display: none; }

JS：

$(function() {
  $('form').submit(function() {
    if (!$('#TOC_check').is(':checked')) {
      $('#TOC').show();
      $('input[type="submit"]').hide();
      return false;
    }
  });
  $('#TOC_check').change(function() {
    if ($(this).is(':checked')) {
      $('input[type="submit"]').show();
    } else {
      $('input[type="submit"]').hide();
    }
  });
});

工作JSFIDDLE

Answer 2

假设他们是唯一的兄弟姐妹，您可以像这样使用.hide()和.show()：

 $('myclass').click(function(){//give them the same class name
      $(this).hide();
      $(this).siblings().show();
 })

Answer 3

Html示例：

<form name="" action="" id="the_form">
    <input type="checkbox" value="some value" style="display: none;" class="check"/>
    <input type="submit" value="Submit" class="submit_button"/>
</form>

脚本示例：

$(document).ready(function(){
    $(".submit_button").click(function(event){
         event.preventDefault();
        $(this).fadeOut('slow', function(){
            $(".check").show();
        });
    });
   $(".check").click(function(){
       if($(this).is(':checked')){
           $("#the_form").submit();
       }
   })
})

Answer 4

<input type="submit" value="Submit" class="submit_button">
<input type="checkbox" value="some value" style="display: none;" class="check">

脚本示例：

$(document).ready(function(){
    $(".submit_button").click(function(){
        $(this).fadeOut('slow', function(){
            $(".check").show();
        });
    });

   $("check").click(function(){
       if($(this).is(':checked')){
           //Do action
       }
   })
})

Answer 5

假设你有这样的HTML，包含在form标记id="form"

<input id="chk" type="checkbox" /><label>Do you agree?</label> <br />
<input id="btn" type="submit" value="Submit" />

您可以使用一些jQuery来检测提交状态并修改按钮文本

$("#form").submit(function () {
    var isChecked = $("#chk").prop("checked");
    var $btn = $("#btn");

    if (!isChecked) {
        $btn.attr("value", "I agree to the TOS");
        return false;
    }
});

如何创建一个单击时更改视觉效果的按钮？

5 个答案: