如果单击单选，则激活输入并获取值

Question

我有 3 个无线电输入和 1 个文本输入。 “禁用”属性禁用文本输入。我想要做的是当我点击第三个无线电输入时，我的文本输入应该是活动的。当我单击另一个无线电输入时，我的文本输入应该再次被禁用。接下来我想将值传递给 span 元素。所以，当我点击第一个收音机时，我的跨度应该有这个值等等。我不知道在启用时如何从我的文本输入中获取值。

    $('#sause-oth').on('click', function(){
            $("#sause-other").prop("disabled", false);
    });
    $('.radio').on('click', function(){
        $("#sause-other").prop("disabled", true);
    });

    $('input[name="sause"]').on('change', function(){
        $('#summary_sause').html($(this).val());
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <label for="sause-light">Sos ladgodny</label> <br>
    <input type="radio" name="sause" id="sause-light" value="sos lagodny" class="radio"> <br>
    <label for="sause-hot">Sos ostry</label> <br>
    <input type="radio" name="sause" id="sause-hot" value="sos ostry" class="radio"> <br>
    <label for="sause-other">Sos inny</label> <br>
    <input type="radio" name="sause" id="sause-oth" class="enable">
    <input type="text" name="sause-other" id="sause-other" disabled="disabled">
</section>

<hr>

<p>Sos: <span id="summary_sause"></span></p>

Answer 1

从文本中获取值放在跨度上

$( "#sause-other" ).keyup(function() {
      var text = $(this).val();
      $( "#summary_sause" ).html( text );
});

你可以总结一下你现有的代码：

 $('input[name="sause"]').on('change', function() {
     var value = $(this).val();

     if (value == "on") {
       $("#sause-other").prop("disabled", false);
       $("#summary_sause").html("");
     } else {
       $("#sause-other").prop("disabled", true);
       $("#summary_sause").html(value);
     }
   });

链接： https://jsfiddle.net/832wnhpt/1/

Answer 2

这应该可行：

$(function(){
  $('[name=sause]').on('change', function() {
    if( $(this).attr('id') == 'sause-oth' ) {
      $("#sause-other").prop("disabled", false);
    }
    else {
      $("#sause-other").prop("disabled", true).val('');
      $('#summary_sause').html($(this).val());
    }
  });
  /* changes the text when focus is out of the field */
  $('#sause-other').on('change', function() {
    $('#summary_sause').html($(this).val());
  });
  /* changes the text on key release */
  /*
  $('#sause-other').on('keyup', function() {
    $('#summary_sause').html($(this).val());
  });
  */
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <label for="sause-light">Sos ladgodny</label> <br>
  <input type="radio" name="sause" id="sause-light" value="sos lagodny" class="radio"> <br>
  <label for="sause-hot">Sos ostry</label> <br>
  <input type="radio" name="sause" id="sause-hot" value="sos ostry" class="radio"> <br>
  <label for="sause-other">Sos inny</label> <br>
  <input type="radio" name="sause" id="sause-oth" class="enable">
  <input type="text" name="sause-other" id="sause-other" disabled="disabled">
</section>

<hr>

<p>Sos: <span id="summary_sause"></span></p>

Answer 3

像这样更新您的代码以使其更改

$('#sause-oth').on('click', function(){
            $("#sause-other").prop("disabled", false);
    });
    $('.radio').on('click', function(){
        $("#sause-other").prop("disabled", true);
    });

    $('input[name="sause"]').on('change', function(){
        add($(this).val());
    });
    
    function add(value){
      $('#summary_sause').html(value);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <label for="sause-light">Sos ladgodny</label> <br>
    <input type="radio" name="sause" id="sause-light" value="sos lagodny" class="radio"> <br>
    <label for="sause-hot">Sos ostry</label> <br>
    <input type="radio" name="sause" id="sause-hot" value="sos ostry" class="radio"> <br>
    <label for="sause-other">Sos inny</label> <br>
    <input type="radio" name="sause" id="sause-oth" class="enable" value="">
    <input onkeyup="add(this.value)" type="text" name="sause-other" id="sause-other" disabled="disabled">
</section>

<hr>

<p>Sos: <span id="summary_sause"></span></p>

Answer 4

我不确定我是否正确理解了你想要的东西，但我想你需要这样的东西：

$('#sause-oth').on('click', function() {
  $("#sause-other").prop("disabled", false);
});

$('.radio').on('click', function() {
  $("#sause-other").prop("disabled", true);
});

$('#sause-other').on('keyup', function() {
  $('#summary_sause').html($(this).val());
});

$('input[name="sause"]').on('change', function() {
  var val = this.id === 'sause-oth' ? $('#sause-other').val() : $(this).val();
  $('#summary_sause').html(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <label for="sause-light">Sos ladgodny</label> <br>
  <input type="radio" name="sause" id="sause-light" value="sos lagodny" class="radio"> <br>
  <label for="sause-hot">Sos ostry</label> <br>
  <input type="radio" name="sause" id="sause-hot" value="sos ostry" class="radio"> <br>
  <label for="sause-other">Sos inny</label> <br>
  <input type="radio" name="sause" id="sause-oth" class="enable">
  <input type="text" name="sause-other" id="sause-other" disabled="disabled">
</section>

<hr>

<p>Sos: <span id="summary_sause"></span></p>

Answer 5

据我所知，当您选择另一个按钮然后返回文本时，其他答案并未涵盖这种情况。试试这个。

    $('#sause-oth').on('click', function(){
            $("#sause-other").prop("disabled", false);
    });
    $('.radio').on('click', function(){
        $("#sause-other").prop("disabled", true);
    });

    $('input[name="sause"]').on('change', function(){
        $('#summary_sause').html($(this).val());
    });

    $( "#sause-other" ).on('input', function() {
        $('#summary_sause').html($(this).val());
        $("#sause-oth").val($(this).val());
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <label for="sause-light">Sos ladgodny</label> <br>
    <input type="radio" name="sause" id="sause-light" value="sos lagodny" class="radio"> <br>
    <label for="sause-hot">Sos ostry</label> <br>
    <input type="radio" name="sause" id="sause-hot" value="sos ostry" class="radio"> <br>
    <label for="sause-other">Sos inny</label> <br>
    <input type="radio" name="sause" id="sause-oth" class="enable">
    <input type="text" name="sause-other" id="sause-other" disabled="disabled">
</section>

<hr>

<p>Sos: <span id="summary_sause"></span></p>