Question

我有一个带有一些禁用文本框的简单表单。当用户点击复选框时，文本框将被启用。

如何在文本框中添加一些动画，以便在选中复选框时，框会淡入或滑入...

HTML：

<ul>
<li>
    <input id="addPreviousAddress" name="addPreviousAddress" type="checkbox" />
    <label class="blueText boldText" for="addPreviousAddress">Add Previous Address</label>
</li>
<li>
    <label>House Number</label>
    <input class="requiredField" id="prevHouseNumber" size="10" Maxlength="10" disabled="" type="text" />&nbsp
    <label>Flat Number</label>
    <input class="one-sixth requiredField" id="prevFlat" size="10" Maxlength="16" disabled="" type="text" />
</li>
<li>
    <label>House Name</label>
    <input id="prevHouseName" size="24" Maxlength="26" disabled="" type="text" />
</li>
<li>
    <label>Street</label>
    <input class="three-fifths requiredField" id="prevStreet" size="40" Maxlength="40" disabled="" type="text" />
</li>
<li>
    <label>Town</label>
    <input class="three-fifths" id="prevTown" size="40" Maxlength="20" disabled="" type="text" />
</li>
<li>
    <label>County</label>
    <input class="three-fifths" id="prevCounty" size="25" Maxlength="20" disabled="" type="text" />
</li>
<li>
    <label>Postcode</label>
    <input class="requiredField" id="prevPostcode" size="10" Maxlength="8" disabled="" type="text" />
</li>
<li>
    <label>Time at address</label>
    <input type="text" id="prevTimeYY" size="2" Maxlength="2" disabled="" type="text" />Years &nbsp&nbsp&nbsp
    <input type="text" id="prevTimeMM" size="2" Maxlength="2" disabled="" type="text" />Months</li>

JS：

$('#addPreviousAddress').change(function () {

$("#prevHouseNumber").prop("disabled", !$(this).is(':checked'));
$("#prevFlat").prop("disabled", !$(this).is(':checked'));
$("#prevHouseName").prop("disabled", !$(this).is(':checked'));
$("#prevStreet").prop("disabled", !$(this).is(':checked'));
$("#prevDistrict").prop("disabled", !$(this).is(':checked'));
$("#prevTown").prop("disabled", !$(this).is(':checked'));
$("#prevCounty").prop("disabled", !$(this).is(':checked'));
$("#prevPostcode").prop("disabled", !$(this).is(':checked'));
$("#prevTimeYY").prop("disabled", !$(this).is(':checked'));
$("#prevTimeMM").prop("disabled", !$(this).is(':checked'));

}）;

这是我的小提琴：http://jsfiddle.net/oampz/mtsZ9/1/

任何帮助都将不胜感激。

Answer 1

试试这段代码：

<强> DEMO

  $('#addPreviousAddress').change(function () {
     $("input").not(this).hide();
     $("input").not(this).prop("disabled",!$(this).is(':checked')).fadeIn();
  });

Answer 2

你不能，因为它们已经可见了。你不能淡入可见物体。你可以做的是，你可以隐藏它们，而不是显示那些禁用的文本框。然后单击复选框，您可以将它们淡化为：

$("#prevHouseNumber").fadeIn();

Answer 3

我不确定这是否是您想要的，但您可以尝试以下代码：

  $("#prevHouseName").toggle(600,function(){ 
    $(this).prop("disabled", !$(this).is(':checked'))
 });

jQuery - 启用/禁用文本框的动画

3 个答案: