在 jquery 中启用/禁用文本框答案

【问题标题】：Enable/Disable Textbox in jquery在 jquery 中启用/禁用文本框
【发布时间】：2016-04-04 09:40:52
【问题描述】：

我想在选中第一个单选按钮时启用文本框，如果第二个则我想禁用文本框这是我的代码不起作用请帮助..

<label class="radio-inline">
    <input type="radio" value="Y" name="IsLive" class="grey">
    YES
</label>
<label class="radio-inline">
    <input type="radio" value="N" name="IsLive" class="grey">
    NO
</label>

<label class="col-sm-2 control-label">
    Live Date
</label>
<div class="col-sm-3">
    <input type="text" id="LiveDate" name="LiveDate" class="form-control date-picker">
</div>

$('input:radio[name="IsLive"]').change(function () {
    if ($(this).is(':checked') && $(this).val() == 'Y') {
        // append goes here
        $("#LiveDate").show();
    } else {
        $("#LiveDate").prop("disabled", true);
    }
});

【问题讨论】：

使用 $('input:radio[name="IsLive"]') 代替 $('.grey') 进行选择
JQuery - checkbox enable/disable的可能重复

标签： javascript jquery

【解决方案1】：

您可以通过设置disabled 属性来实现这一点，具体取决于所选无线电的值是否为Y。试试这个：

$('input:radio[name="IsLive"]').change(function() {
    $("#LiveDate").prop("disabled", this.value != 'Y');
});

Working example

请注意，我删除了 :checked 条件，因为它对于单选按钮来说是多余的，因为要引发新的 change 事件，必须检查元素。

【讨论】：

this.value 怎么样？
从你的工作示例中，如果我在 LiveDate 中添加 disabled="true" 那么在这两种情况下它都被禁用了，如果我不添加它那么它就不起作用请帮忙。
@PatelJack 我不确定你的意思？你能添加一个链接到我的工作小提琴的修改版本，它显示了你遇到的问题

【解决方案2】：

更改您的 jquery 代码：

$("input#LiveDate").prop('disabled', true);
$('input:radio[name="IsLive"]').change(function() {
  if ($(this).is(':checked') && $(this).val() == 'Y') {
    // append goes here
    $("input#LiveDate").prop('disabled', false);
  } else {
    $("input#LiveDate").prop('disabled', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio-inline">
  <input type="radio" value="Y" name="IsLive" class="grey"> YES
</label>
<label class="radio-inline">
  <input type="radio" value="N" name="IsLive" class="grey"> NO
</label>

<label class="col-sm-2 control-label">
  Live Date
</label>
<div class="col-sm-3">
  <input type="text" id="LiveDate" name="LiveDate" class="form-control date-picker">
</div>

【讨论】：

感谢帮助..但在下面的代码中，两种情况下文本框都隐藏了..我想启用和禁用。

【解决方案3】：

试试这个：

$('input:radio[name="IsLive"]').change(function() {
  var bool = $(this).val() !== 'Y';
  //$("#LiveDate").show();
  $("#LiveDate").prop("disabled", bool);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio-inline">
  <input type="radio" value="Y" name="IsLive" class="grey">YES
</label>
<label class="radio-inline">
  <input type="radio" value="N" name="IsLive" class="grey">NO
</label>

<label class="col-sm-2 control-label">
  Live Date
</label>
<div class="col-sm-3">
  <input type="text" id="LiveDate" name="LiveDate" class="form-control date-picker">
</div>

【讨论】：

【解决方案4】：

$('input:radio[name="IsLive"]').change(function() {
if ($(this).is(':checked') && $(this).val() != 'Y') {
document.getElementById("LiveDate").disabled = true; 
} 
});

【讨论】：