javascript - 如何禁用第二个选择选项？

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 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>