如何创建一个按钮，单击后可改变外观？

Question

I want to create a Submit button that when clicked once will change it's design from "Submit" to an "I agree to the TOS" checkbox and only once that is checked the actual action/function will initiate.

Does anybody have an elegant solution to this?

Answer 1

Try this:

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();
    }
  });
});

working JSFIDDLE

Answer 2

Assuming that they are the only siblings you can use .hide() and .show() like this:

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

Answer 3

Html example:

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

Script example:

$(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">

Script example:

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

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

Answer 5

Assuming you have HTML like this, wrapped in a form tag with id="form"

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

You can use some jQuery to detect the state on submit and modify the button text

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

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