Rumah > hujung hadapan web > tutorial js > Penyelesaian kepada masalah bahawa sifat Dayakan kawalan Kotak Semak dalam Asp.net tidak boleh ditukar terus menggunakan kemahiran JavaScript script_javascript

Penyelesaian kepada masalah bahawa sifat Dayakan kawalan Kotak Semak dalam Asp.net tidak boleh ditukar terus menggunakan kemahiran JavaScript script_javascript

WBOY
Lepaskan: 2016-05-16 15:39:17
asal
2044 orang telah melayarinya

Saya menghadapi masalah kecil di tempat kerja hari ini Situasinya adalah seperti berikut Apabila saya menetapkan nilai Dayakan Kotak Semak kepada palsu dalam halaman latar belakang, saya menggunakan skrip (chk.disabled = false) di halaman hadapan. dan tidak dapat diubah dilumpuhkan. Nilainya adalah palsu dan kodnya adalah seperti berikut:

Kod meja hadapan:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript">
    function foo() {
      var chk = document.getElementById("<%=chkBlog.ClientID %>");
      if (chk.disabled) {
        chk.disabled = false;
      }
      else {
        chk.disabled = true;
      }
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:CheckBox ID="chkBlog" runat="server" Text="http://owen-zhang.cnblogs.com"></asp:CheckBox>
    <asp:Button ID="btnCheck" runat="server" Text="Client check" OnClientClick="foo();return false;" />
  </div>
  </form>
</body>
</html>
Salin selepas log masuk

Kod hujung belakang:

  protected void Page_Load(object sender, EventArgs e)
  {
    this.chkBlog.Enabled = false;
  }
Salin selepas log masuk

Mengapa ini berlaku? Mari kita lihat kod sumber html, seperti berikut:

<span disabled="disabled">
  <input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" />
  <label for="chkBlog">http://owen-zhang.cnblogs.com</label>
</span>
Salin selepas log masuk

Ternyata apabila atribut Dayakan kawalan Kotak Semak adalah palsu, output kepada Html menjadi satu set kawalan (elemen), bukan satu kawalan seperti yang kami jangkakan.

Pilihan 1:

Dalam kod di atas, walaupun kami menukar atribut lumpuh kawalan chkBlog kepada palsu, atribut lumpuh nod induk () kawalan chkBlog masih dilumpuhkan. Ini mempunyai isu keutamaan Secara amnya, keutamaan nod induk adalah lebih tinggi daripada nod anak Oleh itu, kita perlu menukar nilai nod induk yang dilumpuhkan Kod skrip klien di atas perlu diubah sedikit, seperti berikut :

<script type="text/javascript">
    function foo() {
      var chk = document.getElementById("<%=chkBlog.ClientID %>");
      if (chk.disabled) {
        chk.parentNode.disabled = false;
        chk.disabled = false;
      }
      else {
        chk.parentNode.disabled = true;
        chk.disabled = true;
      }
    }
  </script>
Salin selepas log masuk

Hanya tambahkan kod yang diserlahkan di atas.

Pilihan 2:

Jika anda menggunakan pilihan satu, anda mesti menambah pernyataan tambahan untuk menukar atribut nod induk yang dilumpuhkan Apabila terdapat banyak tempat untuk diubah suai, ia akan menjadi lebih menyusahkan, dan ia tidak mematuhi logik kod umum dan. adalah kod berlebihan. Adakah terdapat cara lain yang lebih mudah? Ya~, kami hanya perlu mengubah suai kod latar belakang, seperti berikut:

  protected void Page_Load(object sender, EventArgs e)
  {
    this.chkBlog.InputAttributes.Add("disabled", "disabled");
  }
Salin selepas log masuk

Iaitu, kami tidak menukar atribut Dayakan Kotak Semak, tetapi menukar output kandungan Html dengan Kotak Semak kepada klien melalui tetapan atribut dalam InputAttributes, seperti berikut:

<input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" />
<label for="chkBlog">http://owen-zhang.cnblogs.com</label>
Salin selepas log masuk

Nod induk "berlebihan" sebelum ini kini hilang.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan