如何禁用第二選擇選項？

Question

<select id="title0">
   <option value="0">--- disable</option>
   <option value="1"> books</option>
</select>
<button id="save" type="submit">Save</button>

<select id="title1">
   <option value="0">--- disable</option>
   <option value="1"> books</option>
</select>
<button id="save" type="submit">Save</button>

我的html選擇代碼

<script>
$(document).ready(function(){

$("#title0").change(function (){
          if($(this).val() === "0"){
            $('#save').prop('disabled', true);
          }else{
            $('#save').prop('disabled', false);
          }
        });

$("#title1").change(function (){
          if($(this).val() === "0"){
            $('#save').prop('disabled', true);
          }else{
            $('#save').prop('disabled', false);
          }
        });
});

有人幫我嗎？ 我的第二個select（id = title1）JavaScript無法正常工作。 它僅對前1個（id = title0）有效。 我想禁用第二個選擇的按鈕。

Answer 1

您的按鈕都具有相同的ID （“保存”）。

也許您可以將ID更改為“ save1”和“ save2”？

<select id="title0">
   <option value="0">--- disable</option>
   <option value="1"> books</option>
</select>
<button id="save1" type="submit">Save</button>

<select id="title1">
   <option value="0">--- disable</option>
   <option value="1"> books</option>
</select>
<button id="save2" type="submit">Save</button>

然后，您可以將JavaScript更改為：

$(document).ready(function(){

    $("#title0").change(function (){
        if($(this).val() === "0"){
            $('#save2').prop('disabled', true);
        }else{
            $('#save2').prop('disabled', false);
        }
    });

    $("#title1").change(function (){
        if($(this).val() === "0"){
            $('#save1').prop('disabled', true);
        }else{
            $('#save1').prop('disabled', false);
        }
    });
});

---

編輯：如果要在啟動時禁用按鈕，則可以在末尾添加.change方法，如下所示：

$(document).ready(function(){

    $("#title0").change(function (){
        if($(this).val() === "0"){
            $('#save2').prop('disabled', true);
        }else{
            $('#save2').prop('disabled', false);
        }
    }).change();

    $("#title1").change(function (){
        if($(this).val() === "0"){
            $('#save1').prop('disabled', true);
        }else{
            $('#save1').prop('disabled', false);
        }
    }).change();
});

這樣，您可以定義“更改”事件后應該發生的情況，然后立即執行它。 打開頁面后，按鈕將被禁用。 如果從頭開始設置Disabled屬性，則也可以實現此目的。

Answer 2

您的標記無效，因為存在兩個具有相同ID save元素。

設置另一個ID，即： save0和save1 。

 $(document).ready(function() { $("#title0").change(function() { if ($(this).val() === "0") { $('#save0').prop('disabled', true); } else { $('#save0').prop('disabled', false); } }); $("#title1").change(function() { if ($(this).val() === "0") { $('#save1').prop('disabled', true); } else { $('#save1').prop('disabled', false); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="title0"> <option value="0">--- disable</option> <option value="1"> books</option> </select> <button id="save0" type="submit">Save</button> <select id="title1"> <option value="0">--- disable</option> <option value="1"> books</option> </select> <button id="save1" type="submit">Save</button>