JQuery Eingänge deaktivieren, wenn Option ausgewählt ist

Question

Ich habe 2 Optionen: #home-none und #home-select, wenn # home-none ausgewählt ist, werden alle meine Eingaben mit der Klasse .home deaktiviert.

HTML:

Optionen

<select class="form-control"> 
    <option id="home-none">-</option> 
    <option id="home-select">Team</option> 
</select> 

Eingänge

<div class="form-group"> 
    <input class="form-control home" name="h-p1-fn" placeholder="First name" type="text"/> 
</div> 
<div class="form-group"> 
    <input class="form-control home" name="h-p1-ln" placeholder="Last name" type="text"/> 
</div> 

JS:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#home-select").click(function(){ 
      $(".home").prop('disabled',true); 
     }); 
     $("#home-none").click(function(){ 
      $(".home").prop('disabled',true); 
     }); 
    }); 
</script> 

Die Konsole Fehler nicht zeigen, aber es funktioniert nicht.

Answer 1

Sie hängen an das falsche Ereignis. Verwenden Sie stattdessen das Ereignis der select. Von dort können Sie das value Attribut der option Elemente lesen, um die relevanten input Elemente als deaktiviert zu setzen. Versuchen Sie folgendes:

$(document).ready(function(){ 
 
    $("select.form-control").change(function(){ 
 
    $(".home").prop('disabled', $(this).val() == 'home-none'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control"> 
 
    <option value="home-none">-</option> 
 
    <option value="home-select">Team</option> 
 
</select> 
 

 
<div class="form-group"> 
 
    <input class="form-control home" name="h-p1-fn" placeholder="First name" type="text"/> 
 
</div> 
 
<div class="form-group"> 
 
    <input class="form-control home" name="h-p1-ln" placeholder="Last name" type="text"/> 
 
</div>

Answer 2

Dies funktioniert besser

1. Gebrauchswert anstelle von ID auf Option
2. verwenden, um das Änderungsereignis
3. führen Sie das Änderungsereignis auf Last handle a change select beim Nachladen

Linie dies:

<select class="form-control"> 
    <option value="home-none">-</option> 
    <option value="home-select">Team</option> 
</select> 

$(function() { 
    $("select.form-control").on("change",function() { 
    $(".home").prop('disabled',this.value=="home-none"); 
    }).change(); // execute on load 
});