Ajax 数据选项，如果没有禁用按钮

Question

我需要帮助来禁用我的按钮，如果选项 selected 如果“否”它被禁用，如果“是”它被启用。我正在使用我的 AJAX 来调用选项。

这是我的 HTML <option> 和 <button> 代码：

<label for="select-Require-CDS" class="col-form-label">Require CDS</label> <br/>

<select class="select-Require-CDS custom-select-sm col-6" id="select-Require-CDS" required>
   <option selected disabled value="">Select ....</option>
</select>

<div class="invalid-feedback">
   Please select a valid option .
</div>

<button id="select-Yes-No" style="margin-left: 10px; ">Select</button>

这是我的 AJAX 代码：

$.ajax({
    // The url that you're going to post. This is the url that you're going to put to call the backend api,
    // in this case, it's  https://ecoexchange.dscloud.me:8080/api/get (production env)
    url: "https://ecoexchange.dscloud.me:8090/api/get",
    
    // The HTTP method that you're planning to use i.e
    // GET, POST, PUT, DELETE. In this case it's a get method, so we'll use GET
    method: "GET",
    
    // In this case, we are going to use headers as 
    headers: {
        // The query you're planning to call; i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
        query: "RequireGet()",
  
       // Gets the apikey from the sessionStorage
        apikey: sessionStorage.getItem("apikey")
    },
    success: function(data, textStatus, xhr) {
        console.log(data);
      
        for (let option of data)
        {
            $('#select-Require-CDS').append($('<option>', {
                value: option.RequireOption,
                text: option.RequireOption
            }));
        }
    },
    error: function(xhr, textStatus, err) {
        console.log(err);
    }
});

这就是我的 JSON 回复：

[
    {
        "RequireOption": "No"
    },
    {
        "RequireOption": "Yes"
    }
]

所以我的网站显示是这样的

现在我怎么能说我 select 选项为“否”按钮被禁用但如果“是”被启用？

如果没有它怎么也被禁用？

Answer 1

$('#select-Require-CDS').on('change', function(){
    if($(this).val()=='Yes'){
        $('#select-Yes-No').attr('disabled',false) //button is now enabled
    }else{
        $('#select-Yes-No').attr('disabled',true) //button is now disabled
    }
});

这是一个监听 select 上变化的处理程序。根据 selected 的内容，它会调整按钮的可用性。它未经测试，但应该可以解决问题。

我使用了 .on，因为您稍后将使用 ajax 添加属性（稍后 = 在 dom 准备好之后），因此 .change 将不适用于这些选项

Ajax 数据选项，如果没有禁用按钮

Ajax data Option if no button disabled

html

javascript

ajax

button