Question

我的代码设置如下：

<form>
    <button id="button1">button1</button>
    <button id="button2">button2</button>
    <input type="submit" value="submit">
</form>

最初如何在点击button1或button2之前禁用我的提交按钮？

最重要的问题是如何在禁用备用按钮的同时启用禁用按钮。这样，用户只能提交其中一个按钮的值，而不能同时提交两个按钮。

我知道我会使用$('#button').attr("disabled", "disabled")添加已停用的属性，并使用$('#button').attr("disabled", true)或$('#button').attr("disabled", false)设置按钮。我也意识到.removeAttr方法删除了属性，但我不确定如何将它们拼凑在一起。任何帮助将不胜感激。

Answer 1

假设你需要这个。

$(function() {
    $("#button1, #button2").click(function(event){
      //Since <button> elements are submit buttons by default.
      event.preventDefault(); 
      
      //Enable other button
      $("#button1, #button2").not(this).prop('disabled', false);
      
      //Disable the current
      $(this).prop('disabled', true);
      
      //Enable submit
      $('#btnsubmit').prop('disabled', false);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <button id="button1">button1</button>
    <button id="button2">button2</button>
    <input id="btnsubmit" type="submit" value="submit" disabled>
</form>

Answer 2

尝试这个我已经弄清楚了。我已经制作了两种类型的小提琴参考

Fiddle for the button action

Fiddle2 使用过的代码片段

    $("input[type='submit']").attr("disabled","disabled");
$("button").removeAttr("disabled");
    $("button").each(function(){
        $(this).click(function(){
            $(this).attr("disabled","disabled");
            $(this).siblings().removeAttr("disabled");
            $("input[type='submit']").removeAttr("disabled");
            return false;
        });        
    });

Answer 3

试试这个，它还会告诉你哪个被禁用，

$(function() {
  $("#button1, #button2").click(function() {
    $("#button1, #button2").not(this).prop('disabled', false);
    $(this).prop('disabled', true);
  });

  $("form").on("submit", function() {
    alert("disabled button:" + $("input:disabled").attr("id"));


  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
  <input type="button" id="button1" disabled value="button1" />

  <input type="button" id="button2" value="button2" />

  <input type="submit" value="submit" />
</form>

如果单击button1，如何禁用button2，如果单击button1，则禁用button2。

3 个答案: