Question

我想用不同的input元素创建一个简单的html表单。每个问题的问题和可能的选择都存储在数据库中。我们的想法是使用PHP呈现表单和子输入元素，因此一个简单的PHP函数将根据是type="text"还是type="radio"来处理排版：

<form>
First name: <input id="1" type="text" name="firstname">
Last name: <input id="2" type="text" name="lastname">
<input id="3" type="radio" name="sex" value="male">Male
<input id="4" type="radio" name="sex" value="female">Female
<div id="div_5_optional">
Maiden name: <input id="5" type="text" name="maidenname" disabled="disabled">
</div>
</form>

现在，默认情况下，input id="5"将被禁用。但我也想删除它。我可以通过加载我的标题来获取它（虽然我无法保证移动是聪明的）

<script>
$(document).ready(function(){
  $("[disabled=disabled]").parent().remove();
});
</script>

到目前为止，删除了div元素。然而，当我点击与Female对应的单选按钮时，我想将元素放回原位。我添加了标题，就在前面的js脚本下面

<script type='text/javascript' src='scripts/enable_elements.js'></script>

加载此功能

// enable_elements.js

$(document).ready(function(){

    $('#4').click(function(){
    $( '#5' ).prop( "disabled", false );
    });

});

然而，一切都行不通。我想问题可能是我的ready(function)只在开始时加载一次然后进入睡眠状态？我应该以不同的方式构建我的表单吗？

Answer 1

您需要为调用您的函数并显示或隐藏字段的女性和男性复选框创建一个事件处理程序

Answer 2

您不希望remove()，而是想要hide()。

$(document).ready(function(){
    $("#5").hide();
});

您还要处理#3上的点击：

$('#3').click(function(){
    $( '#5' ).attr("disabled", "disabled").hide();
});
$('#4').click(function(){
    $( '#5' ).attr("disabled", "").show();
});

注意：我保持＆＃34;禁用＆＃34;属性，但实际上你并不需要它，因为它会在无法选择时被隐藏......

如果您删除了#5，那么它就会丢失，您无法再次显示它。所以点击男性，然后是女性，再回到男性身上，然后再点击女性......就行不通了。

从html表单添加和删除元素的最佳方法

2 个答案: