Отключить текстовое поле после переключения между переключателями

Question

У меня есть следующий код. Есть ли разумный способ отключить текстовое поле и очистить его значение после переключения между переключателями?

<div class="checkbox"> 
<label style="margin-bottom:10px">Number of...:</label> 
    <div class="input-group" style="margin-bottom:10px"> 
     <input class="radio" name="2" type="radio" checked="checked" id="numOfRadio" style="display:block;float:left"> 
     <input class="form-control" name="numOf" type="number" placeholder="1000" value="1000" id="numOf" style="width:140px" /> 
     <label for="radio_2" style="font-weight:400"><input type="radio" name="2" id="radioAll" style="margin-left" />All</label> 
    </div>  
</div> 

Я пытаюсь использовать следующий код, но это не помогло:

$('.radio').on('click', function() { 
    $('.radio') 
     .siblings() 
     .prop('disabled', true); 

    $(this) 
     .siblings() 
     .prop('disabled', false); 
}); 

Answer 1

Попробуйте это. Второй номер radio находится внутри метки. Так что siblings не достаточно. Получите родителя div и используйте его, чтобы добраться до input, используя find.

$('.radio').on('change', function() { 
 
    var val = this.id == 'radioAll' ? '' : 1000; 
 
    $(this) 
 
    .closest('div').find('input[type="number"]') 
 
    .prop('disabled', this.id == 'radioAll') 
 
    .val(val).attr("placeholder",val); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="checkbox"> 
 
    <label style="margin-bottom:10px;">Number of...:</label> 
 
    <div class="input-group" style="margin-bottom:10px"> 
 
    <input class="radio" name="2" type="radio" checked="checked" id="numOfRadio" style="display:block;float:left"> 
 
    <input class="form-control" name="numOf" type="number" placeholder="1000" value="1000" id="numOf" style="width:140px" /> 
 
    <label for="radioAll" style="font-weight:400"> 
 
     <input class="radio" type="radio" name="2" id="radioAll" style="margin-left" />All 
 
    </label> 
 
    </div> 
 
</div>

Answer 2

Вы можете добавить эту функцию в ваш .js файл

function Disable() { 
    var elem = document.getElementById('numOf'); 
    elem.disabled = true; 
    elem.value=""; 
} 

затем вызвать его в случае OnClick()

onclick="javascript:Disable()"