Question

我有这个脚本，一旦选中了四个复选框中的一个，就会启用提交按钮。此脚本在PC上的chrome中成功运行，但在使用safari的iPad设备上无法运行。我做错了什么？

    <!---JQuery Iniialization --->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<!--- This script disables submit button until check box is checked.--->
<script>
window.onload = function() {

    var checkboxes = $("input[type='checkbox']"),
        submitButt = $("input[type='submit']");

    checkboxes.click(function() {
        submitButt.attr("disabled", !checkboxes.is(":checked"));
    });
}
</script>

这是我的表格

<form action="signature_action.cfm?ticketID=#url.ticketID#&TT=#url.TT#&techID=#url.techID#&device=ipad" method="post" NAME="SigForm" id="SigForm">

<input name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" />
                                <label for="check1"><span class="style1">Equipment Dropped Off &nbsp; &nbsp; </span></label>
                                <span class="style1">
                                <input name="work" type="checkbox" id="check2" value="work"/>
                                <label for="check2">Work performed &nbsp; &nbsp; </label>
                                <input name="payment" id="check3" type="checkbox" value="payment" />
                                <label for="check3">Payment Recieved &nbsp; &nbsp; </label>
                                <input name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
                                <label for="check4">Equipment Picked Up</label>

                                <input name="submit" type="submit" id="submit" class='btn-style-mobile' value="Click Here To Accept Signature" disabled>

</form>

Answer 1

$(document).ready(function () {
  var checkboxes = $("input[type='checkbox']"),
    submitButt = $("#submit");

  function allChecked() {
    var result = true;
    checkboxes.each(function() {
        if(!$(this).is(":checked")) {
           result = false; 
        }  
    });
    return result;
  }

  checkboxes.on('change', function(e){
    e.preventDefault();
    if(!allChecked()) {
        submitButt.attr('disabled','disabled');
    } else {
        submitButt.removeAttr('disabled');       
    }
  });

});

https://jsfiddle.net/hb7f4k2r/

 //If you need this functionality for only one check-box. 
 //Add a specific class/id to that particular check-box.
 $(".specific-checkbox").on('change', function () {
   if ($(this).is(':checked')) {
      submitButt.removeAttr('disabled');
   } else {
       submitButt.attr('disabled','disabled');
   }
});

通过Java启用表单按钮不适用于移动设备

1 个答案: