Question

我在这里有一个表单，其中id类似于用户可以选择单选按钮来选择预定义的数量选项，或者按文本框（焦点）来选择自定义数量。以下javascript的目的是在选择预定义量时清除文本框。它还允许用户点击文本框（onfocus）以在CP_otheramount字段中输入自定义金额（也使用单选按钮作为后备）。

除了onfocus之外，这一切似乎都在起作用。它在加载时工作得很好......但尝试这种情况：

加载页面，在文本框内单击，然后通过选择值3单选按钮（64）决定改变主意...然后决定再次按下onfocus文本框中的内容...它将被禁用并停止你点击内部或写一个数字！

任何人都可以在这里看到问题吗？它很奇怪，因为它适用于Stackoverflow而不是在现场网站上。非常感谢你的帮助。

到目前为止，这是创建的内容：

function activate() {
  $('#other').prop('checked', true);
  $('#other').trigger('click');
  $('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
  if ($(this).val() === '') {
    $('input[name="CP_otheramount"]').val('');
    $('#theamount').removeAttr("disabled");
  } else {
    $('#theamount').prop("disabled", "disabled");
    $('input[name="CP_otheramount"]').val('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>

<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>

<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>

<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>

<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>

Answer 1

您的代码存在的问题是您正在检查每个单选按钮而不取消选中它们。

function activate() {
  // $('#other').prop('checked', true); Remove this line;
  $('#other').trigger('click');
  $('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
  if ($(this).val() === '') {
    $('input[name="CP_otheramount"]').val('');
    $('#theamount').removeAttr("disabled");
  } else {
    $('#theamount').prop("disabled", "disabled");
    $('input[name="CP_otheramount"]').val('');
  }
});

还

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Only check one, or none by Default -->
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>

<input type="radio" name="am_payment" value="11"> <strong>100</strong>

<input type="radio" name="am_payment" value="32"> <strong>250</strong>

<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>

<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>

更新：

这对我有用，但我不知道为什么它不适合你，所以我重写了这些功能。看看这是否适合你。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>

<input type="radio" name="am_payment" value="11"> <strong>100</strong>

<input type="radio" name="am_payment" value="32"> <strong>250</strong>

<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>

<span id="toggle"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>

<script>
    function activate(){
        $('#theamount').attr('disabled',false);
        $('#theamount').focus();
        $('#other').click();
    }

    function deactivate(){
        $('#theamount').val('');
        $('#theamount').attr('disabled',true);
    }

    $('#toggle').click(function(){
        activate();
    });
    $('input[name="am_payment"]').change(function(){
        if($(this).val() != ""){
            deactivate();
        }else{
            activate();
        }
    });
</script>

选择文本框时焦点不起作用

1 个答案: