如果使用Django或JavaScript选择其他字段,如何禁用字段?

时间:2015-12-08 07:49:45

标签: javascript python html django

我有以下Django方案。

models.py

class Method2(models.Model):
    inputfile_param     = models.FileField(validators=[method1_validate_inputfile])
    ip_address          = models.CharField(max_length=100)
    creationtime        = models.DateTimeField(auto_now_add=True)
    species_param       = models.CharField(max_length=20, default='mouse', choices=(
        ('mouse', 'M. musculus'), ('human','H. sapiens')))
    organs_param       = models.CharField(max_length=20, default='none', choices=(
        ('no_pref', 'No preference'),
        ('bone_marrow','Bone marrow'),
        ("abdominal_adipose","Abdominal adipose"),
        ("blood","Blood"),
        ("fetal_liver","Fetal liver")))

显示如下:

enter image description here

现在,我想要做的是,每当用户选择human/H.sapiens时,必须禁用Organs字段及其所有内容。我怎样才能做到这一点?

我的 html 并尝试 JavaScript 如下所示:



var species = $("#id_species_param");
var organs = $("#id_organs_param");

function refreshOptions() {
  if (species.find(':selected').text() === "human") {
      organs.getElementById("organs_param").attr("disabled", true);
  } else {
    organs.find("option").prop("disabled", false)
  };
}
refreshOptions();

method.on("change", refreshOptions);

<!DOCTYPE html>
<html>

<body>

  <!--- DISPLAY THE FORM -->
  <div class="container">
    <div class="row">
      <div class="col-sm-8">
        <!--- Input form -->


        <form id="id-method2Form" class="form-horizontal" method="post" enctype="multipart/form-data">
  
 
          <div id="div_id_species_param" class="form-group">
            <label for="id_species_param" class="control-label col-lg-2 requiredField">
              Species<span class="asteriskField">*</span> 
            </label>
            <div class="controls col-lg-8">
              <select class="select form-control" id="id_species_param" name="species_param">
                <option value="mouse" selected="selected">M. musculus</option>
                <option value="human">H. sapiens</option>
              </select>
            </div>
          </div>
          <div id="div_id_organs_param" class="form-group">
            <label for="id_organs_param" class="control-label col-lg-2 requiredField">
              Organs<span class="asteriskField">*</span> 
            </label>
            <div class="controls col-lg-8">
              <select class="select form-control" id="id_organs_param" name="organs_param">
                <option value="no_pref">No preference</option>
                <option value="bone_marrow">Bone marrow</option>
                <option value="abdominal_adipose">Abdominal adipose</option>

                <div class="form-group">
                  <div class="aab controls col-lg-2"></div>
                  <div class="controls col-lg-8">
                    <input type="submit" name="submit" value="Submit" class="btn btn-primary" id="submit-id-submit" />
                  </div>
                </div>
        </form>
</body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:4)

您的代码中存在一些错误。在此更正:

var species = $("#id_species_param");
var organs = $("#id_organs_param");

function refreshOptions() {
  if (species.val() === "human") {
      organs.attr("disabled", true);
  } else {
    organs.attr("disabled", false);
  };
}
refreshOptions();

species.on("change", refreshOptions);

立即查看:jsfiddle