Question

因此，每当用户选择“女性”作为她的性别并将“已婚，寡妇”作为其公民身份时，我就会尝试启用文本框，而对于那些选择“男性”作为其身份的人，它将被禁用。但它没有使用我的代码。请帮助我，我不擅长javascript。谢谢

php文件

$maiden = $gender = $status = "";

$maidenErr = $genderErr = $statusErr = "";

?>

验证文本框。

//Maiden
    if(empty($_POST["maiden"])) {  
     $maidenErr = "Missing maiden name";  
     $valid =false;  
      }  
   else {  
      $maiden = test_input($_POST["maiden"]);  
           // check if name only contains letters and whitespace  
   if (!preg_match("/^[a-zA-Z ]*$/",$MI))  
    {  
     $maidenErr = "Only letters and white space allowed";  
    $valid=false;  
       }  
   }
//gender   
   if (isset($_POST["gender"])) {  
    $gender = test_input($_POST["gender"]); 

      }  
   else {  
      $genderErr = "specify your gender";  
     $valid=false;
   }  
//status
    if (empty($_POST["status"])) {  
     $statusErr = "specify your status";  
     $valid=false;  
      }  
   else {  
     $status = test_input($_POST["status"]);  
   }

这是我的javascript，我想要启用和禁用按钮。

<script>

    function enable_text(status)
    {
    status=!status; 
        document.f1.other_text.disabled = status;
    }
    function makeDisable(){
        var x=document.getElementById("mySelect")
        x.disabled=true
    }
    function makeEnable(){
        var x=document.getElementById("mySelect")
        if((document.getElementById("status").value =="single") && (document.getElementById("gender").value =="female"))
        {
            x.disabled=true
        }
        else
        {
            x.disabled=false
        }
    }

    });

    </script>

这是我的html页面。

<form>

 <label for="maidenname" >Maiden Name</label>
            <input type="text" name="maiden" id="mySelect" value="<?php echo htmlspecialchars($maiden);?>" disabled=true maxlength="20" placeholder="Maidenname">
            <p><span class="message">(for female only)</span></p>
            <span class="error"><?php echo $maidenErr;?></span>  
        </div>

        <label for="gender" >Gender&nbsp;</label><br />
            <input type=radio name="gender" value="<?php if (isset($gender) && $gender=="male")echo "checked";?>" id="gender" onclick="makeDisable()">Male &nbsp;
            <input type=radio name="gender" value="<?php if (isset($gender) && $gender=="female")echo "checked";?>" id="gender" onclick="makeEnable()" >Female 
            <p><span class="error"><?php echo $genderErr;?></span></p>
        </div>
        <div class="col-sm-3">
        <label for="atatus" >Civil Status</label>
            <select name="status" id="status" value="<?php echo htmlspecialchars($status);?>"  onChange="makeEnable()">
                <option value="single">Single</option>
                <option value="married">Married</option>
                <option value="widow/er">Widow/er</option>
                <option value="other">Other</option>
                </select>
                <p><span class="error"><?php echo $statusErr;?></span></p>
        </div>


</form>

Answer 1

我制作了一个jQuery解决方案，因为它在你的帖子中被标记了。要将其合并到您的页面中，您需要确保包含jQuery（我使用的是1.12.0版）。我删除了PHP的东西，因为你问的是JavaScript，我删除了onclick / onchange属性，所以我可以在jQuery中设置click监听器。

这里是适用的jQuery：

$(document).on("change", "[name=gender],[name=status]", function(){
  var gender = $('[name=gender]:checked').val();
  var status = $('[name=status] option:selected').val();
  if(gender == 'female' && status == 'single'){
    $('[name=maiden]').prop('disabled', false);
  }
  else{
    $('[name=maiden]').prop('disabled', true);
  }
});

我也必须修改HTML中的另一个东西 - 我为男性和女性性别复选框添加了值（值为＃34;男性＆＃34;和＃34;女性＆＃34;）。这是我测试过的最小HTML：

<form>
  <label for="maidenname" >Maiden Name</label>
  <input type="text" name="maiden" id="mySelect" value="" disabled=true maxlength="20" placeholder="Maidenname">
  <p><span class="message">(for female only)</span></p>
  <span class="error"></span>  

  <label for="gender" >Gender&nbsp;</label><br />
  <input type=radio name="gender" id="gender" value='male'>Male &nbsp;
  <input type=radio name="gender" id="gender" value='female'>Female 
  <p><span class="error"></span></p>
  <div class="col-sm-3">
    <label for="atatus" >Civil Status</label>
    <select name="status" id="status">
      <option value="single">Single</option>
      <option value="married">Married</option>
      <option value="widow/er">Widow/er</option>
      <option value="other">Other</option>
    </select>
    <p><span class="error"></span></p>
  </div>
</form>

在这里，您可以通过评论来审核它：https://jsfiddle.net/fo8m8fta/

Answer 2

我尝试了mark.hch的代码，最后我按照我想要的方式做了。所以这是我的最终代码，来自mark.hch：）

<强>的Javascript

<script>
    //whenever an item with the name attribute set to gender or status is changed:
    $(document).on("change", "[name=gender],[name=status]", function(){
        //gather the checked gender
        var gender = $('[name=gender]:checked').val();
      //gather the selected status
      var status = $('[name=status] option:selected').val();
      //if the user checked female and selected single
      if(gender == 'female' && status != 'single'){
        //enable the maidenname input
        $('[name=maiden]').prop('disabled', false);
      }
     else{
        //disable the maidenname input
        $('[name=maiden]').prop('disabled', true);
      }
    });
</script>

<强> HTML

<form>
  <label for="maidenname" >Maiden Name</label>
  <input type="text" name="maiden" id="mySelect" value="" disabled=true maxlength="20" placeholder="Maidenname">
  <p><span class="message">(for female only)</span></p>
  <span class="error"></span>  

  <label for="gender" >Gender&nbsp;</label><br />
  <input type=radio name="gender" id="gender" value='male'>Male &nbsp;
  <input type=radio name="gender" id="gender" value='female'>Female 
  <p><span class="error"></span></p>
  <div class="col-sm-3">
    <label for="atatus" >Civil Status</label>
    <select name="status" id="status">
      <option value="single">Single</option>
      <option value="married">Married</option>
      <option value="widow/er">Widow/er</option>
      <option value="other">Other</option>
    </select>
    <p><span class="error"></span></p>
  </div>
</form>

Javascript中的Or和AND语句

2 个答案: