如何禁用第二选择选项？

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>

my html select code

<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);
          }
        });
});

anyone help me? my second select(id=title1) the JavaScript doesn't work. it only effect for the first 1 (id=title0). i want to disable the button of the second select to.

Answer 1

Your Buttons both have the same ID ("save").

Perhaps you can change the ID to "save1" and "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>

And then you can change your javascript to:

$(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);
        }
    });
});

---

Edit: If you want to have the button disabled on startup, you can add the .change method at the end like this:

$(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();
});

This way, you define what is supposed to happen upon the "change" event and then immediately execute it. Upon opening the page, the buttons are disabled. You can also achieve this, if you set the disabled attribute from the beginning.

Answer 2

Your markup is invalid because there are two elements with the same ID save .

Set a different id, ie: save0 and 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>