javascript - On 检查一个输入被禁用，另一个被启用

Question

我正在编写一个表单，该表单获取某些搜索过程的值..我正在编写两个文本字段供用户输入其中任何一个。但一次只有一个可以启用..用户可以通过选中复选框选择该选项。默认情况下，其中一个字段应该启用，当复选框被选中时，它（最初启用的那个）被禁用而其他被启用，反之亦然，当复选框未被选中时。

这里is的小提琴：

http://jsfiddle.net/awBvq/224/

Answer 1

这将解决您的问题

HTML：

<input type="text" name="" />
<input type="checkbox" name="" />
<input type="text" name="" disabled="'disabled'"/>

JS：

$(':checkbox').change(function(){
    if ($(this).is(':checked')) {
        $(this).prev().attr('disabled','disabled');
         $(this).next().removeAttr('disabled');
    } else {
        $(this).next().attr('disabled','disabled');
        $(this).prev().removeAttr('disabled');

    }
});

Answer 2

简单的逻辑：

(1) 默认禁用任何一个文本框。

(2) 使用.prev()或.next()，检查是否有人被禁用。

(3) 如果是，则启用它并禁用另一个，反之亦然。

HTML：

<input type="text" name="" disabled/>  <!--By default it is disabled-->
<input type="checkbox" name="" />
<input type="text" name="" />

Javascript：

$(':checkbox').change(function () {
    if ($(this).prev().is(':disabled')) {
        $(this).prev().removeAttr('disabled');
        $(this).next().attr('disabled', 'disabled');
    } else {
        $(this).next().removeAttr('disabled');
        $(this).prev().attr('disabled', 'disabled');
    }
});

检查这个JSFiddle

Answer 3

它本来可以做得更简单，但这只是一个提示：

if($("#CheckBox").is(":checked"))
{
  $("#Field1").attr("disabled","disabled");
  $("#Field2").removeAttr("disabled");
}
else
{
  $("#Field1").removeAttr("disabled");
  $("#Field2").attr("disabled","disabled");
}