Checkbox deaktivieren, wenn die Menge in der Textbox

Question

überschreitet

Ich habe diesen Code und funktioniert ordnungsgemäß, aber wenn ich das Textfeld lösche, bleibt das Kontrollkästchen aktiviert, was soll ich tun?

<form name="form1"> 
    <div class="controlset-pad"> 
     <input type="checkbox" name="others" onclick="enable_text(this.checked)" class="medium" disabled='disabled'/> 
    </div> 
    <input type="checkbox" name="others" onclick="enable_text(this.checked)" class="medium" disabled='disabled'/> 
    </div> 


     $('input[name=other_name]').keyup(function(){ 
      if (this.value.length > 0) { 
       $('input[name="others"]').prop('disabled', false) 
      } else { 
       $('input[name="others"]').prop('disabled', true)  
      } 
     }) 

http://jsfiddle.net/H8VPY/47/

Answer 1

Ändern Sie Ihr Skript wie folgt. Es wird einfach deaktiviert, bevor das Steuerelement deaktiviert wird.

$('input[name=other_name]').keyup(function(){ 
    if (this.value.length > 0) { 
     $('input[name="others"]').prop('disabled', false) 
    } else { 
     $('input[name="others"]').attr('checked', false); 
     $('input[name="others"]').prop('disabled', true)  
    } 
}) 

Answer 2

die Änderung Event hinzufügen als auch für Maus Basis Bearbeitungen wie Rechtsklick> schneiden usw.

Hinweis: Deaktivieren Sie die Option vor Kontrollkästchen deaktivieren.

$('input[name=other_name]').bind('keyup change', function() { 
 
    if (this.value.length > 0) { 
 
    $('input[name="others"]').prop('disabled', false) 
 
    } else { 
 
    $('input[name="others"]').attr('checked', false); 
 
    $('input[name="others"]').prop('disabled', true) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="form1"> 
 
    <div class="controlset-pad"> 
 
    <input type="checkbox" name="others" onclick="enable_text(this.checked)" class="medium" disabled='disabled' /> 
 
    </div> 
 

 
    <div class="field4"> 
 
    <label>Name on credit card if different from above</label> 
 
    <input type="text" name="other_name" class="medium" /> 
 
    </div> 
 
</form>