Question

我想在下拉菜单中选择任何项目时启用提交按钮。这是代码。当用户从下拉列表中选择时，有2个按钮应启用2个按钮。否则，必须先将其删除，直到从下拉列表中选择项目。是否需要添加任何jquery插件？

   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
    <script type="text/javascript">


$(document).ready(function() {


    $(".nextbutton").attr("disabled", true);
     $(".nextbutton1").attr("disabled", true);
    $('.dropdown').change(function() {
        if ($('.dropdown').val() == 0) {
                    $(".nextbutton").attr("disabled", true);
                $(".nextbutton1").attr("disabled", true);
        } else {
                    $(".nextbutton").attr("disabled", false);
                $(".nextbutton1").attr("disabled", false);
        }
    });
});</script>
 </head>

  <body>
<form id="phonetypeform">
      <select name="porting-p1" class="dropdown">
<option value="" class="disablenext">Please select an option...</option>
<option value="1" class="enablenext">I want to keep my current phone number</option>
<option value="2" class="enablenext">I want to choose a new number</option>
        </select>

</form>
<button class="nextbutton1">sd Step</button> 
<button class="nextbutton">Next Step</button>

Answer 1

您使用的是jquery UI吗？因为如果没有，button（）什么都不做。试试简单的attr：

$(document).ready(function () {
    $('.nextbutton').attr('disabled', 'disabled');
    $('.nextbutton1').attr('disabled', 'disabled');
    $('.dropdown').change(function () {
        if ($('.dropdown').val() == 0) {
            $('.nextbutton').attr('disabled', 'disabled');
            $('.nextbutton1').attr('disabled', 'disabled');
        } else {
            $('.nextbutton').removeAttr('disabled');
            $('.nextbutton1').removeAttr('disabled');
        }
    });

});

Answer 2

将您的javascript更改为：

$(document).ready(function() {


    $(".nextbutton").attr("disabled", true);
     $(".nextbutton1").attr("disabled", true);
    $('.dropdown').change(function() {
        if ($('.dropdown').val() == 0) {
                    $(".nextbutton").attr("disabled", true);
                $(".nextbutton1").attr("disabled", true);
        } else {
                    $(".nextbutton").attr("disabled", false);
                $(".nextbutton1").attr("disabled", false);
        }
    });
});

已禁用属性

Answer 3

当我刚刚接下来并运行它时，我发现我遇到了错误，请下次打开开发人员控制台，因为我可以看到很多错误你可能已经拿到了，试试这个：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">

$(document).ready(function() {

    $(".nextbutton").prop('disabled',true);
     $(".nextbutton1").prop('disabled',true);
    $('.dropdown').change(function() {
        if ($('.dropdown').val() == 0) {
          $(".nextbutton").prop('disabled',true);
           $(".nextbutton1").prop('disabled',true);
        } else {
          $(".nextbutton").prop('disabled',false);
           $(".nextbutton1").prop('disabled',false);
        }
    });

});</script>
 </head>

  <body>
<form id="phonetypeform">
      <select name="porting-p1" class="dropdown">
<option value="" class="disablenext">Please select an option...</option>
<option value="1" class="enablenext">1</option>
<option value="2" class="enablenext">2</option>
        </select>

</form>
<button class="nextbutton1">sd Step</button> 
<button class="nextbutton">Next Step</button>

＆＃13;

Answer 4

您的代码在代码段中工作正常。我假设您在实际代码中有多个下拉列表。如果是这样，请将您的选择器更改为唯一，并使用$(this)来估值。

$(document).ready(function() {


    $(".nextbutton").attr("disabled", true);
     $(".nextbutton1").attr("disabled", true);
    $('.dropdown[name=porting-p1]').change(function() {
        if ($(this).val() == 0) {
                    $(".nextbutton").attr("disabled", true);
                $(".nextbutton1").attr("disabled", true);
        } else {
                    $(".nextbutton").attr("disabled", false);
                $(".nextbutton1").attr("disabled", false);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="phonetypeform">
      <select name="porting-p1" class="dropdown">
<option value="" class="disablenext">Please select an option...</option>
<option value="1" class="enablenext">I want to keep my current phone number</option>
<option value="2" class="enablenext">I want to choose a new number</option>
        </select>

</form>
<button class="nextbutton1">sd Step</button> 
<button class="nextbutton">Next Step</button>

Answer 5

您的解决方案实际上正在运行。我只需要将其更改为使用谷歌CDN的jquery 1.12.4。

除此之外，您可以通过在两个按钮上添加disabled属性来默认在页面加载时禁用这两个按钮。这将确保按钮在第一次渲染时被禁用。并且还提供了对两个按钮都相同的类名，因此您只需要调用一行代码来禁用或启用。如果您需要为每个按钮添加唯一标识符，则可以将nextbutton1和nextbutton2作为每个按钮的ID。最后，您可以直接听取下拉列表，而不是检查表单中的更改事件。因此，只有在下拉列表中发生更改时才会触发。

<head>      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#dropdownNumber').change(function() {
                if ($(this).val() == 0) {
                    $(".nextbutton").attr("disabled", true);
                 } else {
                    $(".nextbutton").attr("disabled", false);
                 }
            });
        });
    </script>
</head>

<body>
    <form id="phonetypeform">
        <select name="porting-p1" class="dropdown" id="dropdownNumber">
            <option value="" class="disablenext">Please select an option...</option>
            <option value="1" class="enablenext">I want to keep my current phone number</option>
            <option value="2" class="enablenext">I want to choose a new number</option>
        </select>
    </form>

    <button class="nextbutton" id="nextbutton1" disabled>sd Step</button> 
    <button class="nextbutton" id="nextbutton2" disabled>Next Step</button> 
</body>

在jquery中选择了禁用按钮直到下拉项

5 个答案: