readoly dan disabled

Baik, sekarang sudah jelas 100% masalahnya di mana, karena Anda sudah kirim kode real 👍

Dan memang bukan karena jQuery / AdminLTE / event, tapi ada 2 KESALAHAN TEKNIS KRUSIAL di HTML Anda yang membuat form TIDAK PERNAH bisa diedit, walaupun JS-nya BENAR.

Saya jelaskan pelan tapi tepat sasaran.

---

🔴 PENYEBAB UTAMA #1 (INI YANG PALING FATAL)

❌ Anda pakai:

<input type="textarea" class="form-control" name="alamat" ... readonly>

⚠️ INI SALAH HTML

textarea BUKAN input type

Browser menganggap ini input text biasa, tapi:

readonly tidak berfungsi normal

AdminLTE mengunci field ini

✅ YANG BENAR:

<textarea class="form-control" name="alamat" id="alamat" readonly>

<?=$data['alamat'];?>

</textarea>

📌 Di Spruha → masih “ditoleransi”

📌 Di AdminLTE → langsung gagal

---

🔴 PENYEBAB UTAMA #2 (INI YANG MEMBUAT ANDA MERASA “JS TIDAK JALAN”)

Di form Anda ada field yang disabled, bukan readonly:

<input type="date" ... disabled>

<input type="text" ... disabled>

❗ disabled TIDAK BISA diedit walaupun readonly dihapus

Walaupun JS Anda:

.prop('disabled', false)

👉 AdminLTE mengunci ulang field disabled saat repaint UI.

Makanya:

Tombol Edit berubah ✔

Tapi field tetap tidak bisa diedit ❌

---

🔥 SOLUSI YANG BENAR & AMAN (ADMINLTE FRIENDLY)

✅ 1️⃣ GANTI SEMUA disabled JADI readonly

❌ SALAH:

<input type="date" disabled>

✅ BENAR:

<input type="date" readonly>

---

✅ 2️⃣ Perbaiki field alamat (WAJIB)

<textarea class="form-control" name="alamat" id="alamat" readonly>

<?=$data['alamat'];?>

</textarea>

---

✅ 3️⃣ Gunakan JS KHUSUS ADMINLTE (INI VERSI FINAL)

⚠️ JANGAN pakai .prop('disabled', false) sama sekali

<script>

$(document).on('click', '#btnEdit', function () {

  const form = $('#formProfil');

  const btn = $(this);

  const btnSimpan = $('#btnSimpan');

  const editing = btn.data('editing') === true;

  if (!editing) {

    // MODE EDIT

    form.find('input, textarea')

        .removeAttr('readonly')

        .css('background-color', '#fff')

        .css('cursor', 'text');

    btnSimpan.prop('disabled', false);

    btn

      .data('editing', true)

      .removeClass('btn-primary')

      .addClass('btn-danger')

      .text('Batal');

  } else {

    // MODE LIHAT

    form.find('input, textarea')

        .attr('readonly', true)

        .css('background-color', '#f4f6f9')

        .css('cursor', 'not-allowed');

    btnSimpan.prop('disabled', true);

    btn

      .data('editing', false)

      .removeClass('btn-danger')

      .addClass('btn-primary')

      .text('Edit');

  }

});

</script>

---

🧠 KENAPA DI SPRUHA JALAN, DI ADMINLTE TIDAK?

Faktor Spruha AdminLTE

HTML salah (type="textarea") ❌ dibiarkan ❌❌ fatal

disabled field jarang dipakai dikunci keras

JS override ringan agresif

UI repaint minim otomatis

---

✅ RINGKASAN FINAL (INI INTINYA)

✔ textarea harus <textarea> asli

✔ JANGAN pakai disabled untuk toggle edit

✔ Pakai readonly saja

✔ AdminLTE bukan template biasa, dia ketat

---

🚀 BONUS (KALAU MAU LEBIH PROFESIONAL)

Saya bisa bantu:

🔒 Field tertentu tidak boleh diedit sama sekali

🔄 Auto reset kalau klik Batal

⚡ AJAX submit tanpa reload

🔐 Validasi sebelum Simpan

Tinggal bilang:

> “Lanjutkan versi profesional AdminLTE”

Saya jamin setelah perbaikan ini → langsung jalan.