启用和禁用字段以及验证表单的Javascript

如果选择了动物（在4b中），则应启用以下字段：

i） 动物类型（使用与上述3b相同的列表）、年龄（以月为单位）、性别（雄性、雌性：选择 颜色（黑色、棕色、灰色、白色：选择一种或多种）。（对于以下情况，最高可获得5%的积分奖励： 颜色调色板的使用）

ii）拥有的月数

iii）上次兽医就诊日期、兽医姓名、兽医电话号码

iv）交出动物的原因

d） 如果选择了货币服务（在4b中），则应启用以下字段：金额 请求和付款类型（支票、现金、信用卡：选择一种）

e） 如果选择了服务（在4b中），说明是全职还是兼职（选择一项），以及服务数量 每周工作天数（1-7天）。笔记仅应启用一种类型的服务信息 用户的选择，而其他选择被禁用

捐赠表单
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;"> Donation Form </button>
<button onclick="'" style="width:auto;"> <a href="index.html"> Adoption Page  </a> </button>
    <div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
        <form class="modal-content animate" action="/action_page.php">
            <div class="container">

                  <label> <b> First Name: </b> </label>
                  <input name = "name" type = "text" size = "25" Placeholder=" Enter First Name" required />       
                  <label> <b> Last Name:</b> </label>
                  <input  type = "text" size = "25" placeholder="Enter Last Name" required />       
                  <label><b> Mailing address:</b> </label> 
                  <input  type = "text" size = "25" placeholder=" Enter Home Address" name="Address" required/> 
                  <label> <b> Date of Birth:</b> </label>
                  <input  type = "text" size = "25"  placeholder="DD/MM/YYYY" name="DOB"/>
                  <label> <b> Telephone Number:</b> </label> 
                  <input  type = "text" size = "25" placeholder="Enter Contact Number" name="Tnumber"/>
                  <br>
                  <label><b>Email</b></label>
                  <input type="text" placeholder="Enter Email Address" name="email" required>


                  <p><b>  What type of donation would you like to make  </b> <p/>

                  <select name = "donations">
                                <option selected = " selected">------</option> 
                                <option>Animal </option>
                                <option>Monetary</option>
                                <option>Services</option>

                  <br /> <br />

                  <div id="animal" style ="visibility: hidden;" > 
                  <p> <b>Choose the type of Pet you would like to Donate: </b> </p>

                  <label> Dog <input name = "Pet" align="right" type ="checkbox" value= "Dog " align="right"/></label> 
                  <label> Cat <input name = "Pet" type ="checkbox" value= "Cat" /> </label>
                  <label>Snake <input name = "Pet" type ="checkbox" value= "Snake" />
                  <label> Hamster <input name = "Pet" align="right" type ="checkbox" value= "Hampster " /></label> <br/>
                  </div>






            <div class="clearfix">
                    <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel form </button>
                    <button type="submit" class="submitbtn">Submit</button>
                </div>
            </div>
        </form>
    </div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

     var selected = document.query.selector('#select-donation');
     var animals = document.query.selector('#select-animal');
     var monetary = document.query.selector('select-monetary);
     var service = document.query.selector ('select-service');

     function showlist(){
        if (selected.selectedIndex == 1 )
        { animals.removeAtrribute('disabled');
        monetary.disabled= true;
        service.disabled= true; }
        else if (selected.selectedIndex === 2) 
        { monetary.removeAtrribute('disabled');
        animal.disabled = true;
        service.disabled= true; }
        else if (selected.selectedIndex == 3)
        {service.removeAtrribute ('disabled');
        animal.disabled = true; 
        monetary.disabled = true; }
        }


</script>

×
名字：
姓氏：
邮寄地址：
出生日期:
电话号码：


电子邮件
您希望进行哪种类型的捐赠

------ 
动物
货币的
服务



选择您想捐赠的宠物类型：
狗
猫
蛇
仓鼠

取消表格
提交
//获取模态
var modal=document.getElementById（'id01'）；
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
var selected=document.query.selector（“#选择捐赠”）；
var-animals=document.query.selector（“#选择动物”）；
var monetary=document.query.selector（'select-monetary'）；
var service=document.query.selector（'select-service'）；
函数showlist（）{
if（selected.selectedIndex==1）
{动物。移除属性（'禁用'）；
货币。残疾=真；
service.disabled=true；}
else if（selected.selectedIndex==2）
{monetary.RemoveAttribute（'disabled'）；
动物残疾=真；
service.disabled=true；}
else if（selected.selectedIndex==3）
{service.removeatrAttribute（'disabled'）；
动物残疾=真；
monetary.disabled=true；}
}

您的问题是什么？如何编写JavaScript代码？你已经开始学习一些JavaScript教程了吗？你需要努力向我们展示你已经尝试了一些东西，但却无法成功。仅仅复制和粘贴一个问题不会给您带来任何帮助。请将您的问题显示为您尝试过的代码，并解释您遇到问题的部分。（同时，要禁用一个字段：

document.getElementById（“elementIDhere”）.disabled=true

）对不起，伙计们，我是这个论坛的新手