HTML Input value still exists when disabled - html

Question

I would like to remove my input value when disabled.
I found some solution here:
Reset disabled input field's value
but it didn't work in my case.
My code looks like this:
<figure class="question">
<label>
<div class="order">5</div>
<p class="question_title">Live stream<span class="asterisk">*</span></p>
</label>
<br>
<input name="live_stream" class="radiobtn" type="radio" value="Yes">Yes
<input name="live_stream" class="radiobtn" type="radio" value="No">No
<br>
</figure>
<script>
$("input[name=live_stream]").on('click', function() {
var autoRefresh = $('#autorefresh');
if ($(this).val() == "No") {
autoRefresh.show();
autoRefresh.find('input,select,radio').prop('disabled', false);
} else {
autoRefresh.find('input,select,radio').prop('disabled', true);
autoRefresh.find('input,select,radio').val()= null ;
}
});
</script>
<figure class="question" id="autorefresh">
<label>
<div class="order">6</div>
<p class="question_title">Autorefresh frequency (in seconds)<span class="asterisk">*</span></p>
</label>
<input type="number" id="autoref" name="autorefresh" min="10" max="900" message="Give value between 10 and 900 seconds">
</figure>
Is it achievable by JQuery or at least pure HTML?

Answer 1

You are so close. The problem is in your line autoRefresh.find('input,select,radio').val()= null ;. This is not valid jQuery. Instead, try replacing that line with this:
autoRefresh.find('input,select,radio').val('');
This clears the input value. Full working code:
$("input[name=live_stream]").on('click', function() {
var autoRefresh = $('#autorefresh');
if ($(this).val() == "No") {
autoRefresh.show();
autoRefresh.find('input,select,radio').prop('disabled', false);
} else {
autoRefresh.find('input,select,radio').prop('disabled', true);
autoRefresh.find('input,select,radio').val('');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure class="question">
<label>
<div class="order">5</div>
<p class="question_title">Live stream<span class="asterisk">*</span></p>
</label>
<br>
<input name="live_stream" class="radiobtn" type="radio" value="Yes">Yes
<input name="live_stream" class="radiobtn" type="radio" value="No">No
<br>
</figure>
<figure class="question" id="autorefresh">
<label>
<div class="order">6</div>
<p class="question_title">Autorefresh frequency (in seconds)<span class="asterisk">*</span></p>
</label>
<input type="number" id="autoref" name="autorefresh" min="10" max="900" message="Give value between 10 and 900 seconds">
</figure>