Problem with a class called cs-select

Question

Problem with a class called cs-select

Navigation

#1 by (0 votes)

1

I have a problem with the class cs-select , which does not allow me to activate and deactivate a select.

HTML:

<div class="form-group">
  <label class="col-sm-2 control-label">Forma de pago:</label>
  <div class="col-sm-10">
    <div class="form-group">
      <div class="col-sm-3">
        <div class="radio clip-radio radio-primary">
          <input type="radio" id="transferencia" name="forma_pago" value="transferencia"
          onchange="habilitar(this.value);"
          <?=($fila[ 'forma_pago']=='transferencia' )? 'checked': '';?> />
          <label for="transferencia">Transferencia</label>
          <input value="<?=($fila['forma_pago']=='transferencia')?$fila['dato_pago']:'';?>" type="hidden" name="numero_trans" size="30" maxlength="28">
        </div>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-3">
        <div class="radio clip-radio radio-primary">
          <input type="radio" id="domiciliado" name="forma_pago" value="domiciliado"
          onchange="habilitar(this.value);"
          <?=($fila[ 'forma_pago']=='domiciliado' )? 'checked': '';?> />
          <label for="domiciliado">Domiciliado</label>
        </div>
        <input disabled value="<?=($fila['forma_pago']=='domiciliado')?$fila['dato_pago']:'';?>" type="text" name="domiciliado" id="domicilioC" size="30" maxlength="28">
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-3">
        <div class="radio clip-radio radio-primary">
          <input type="radio" id="efectivo" name="forma_pago" value="efectivo"
          onchange="habilitar(this.value);"
          <?=($fila[ 'forma_pago']=='efectivo' )? 'checked': '';?> />
          <label for="efectivo">Efectivo</label>
        </div>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-3">
        <div class="radio clip-radio radio-primary">
          <input type="radio" id="pagare" name="forma_pago" value="pagare"
          onchange="habilitar(this.value);"
          <?=($fila[ 'forma_pago']=='pagare' )? 'checked': '';?> />
          <label for="pagare">Pagaré</label>
        </div>
        <select name="pagare" id="pagarePlazo" disabled class="cs-select cs-skin-slide">
          <?php if(($fila['dato_pago'] == '') && ($fila['forma_pago']=='pagare')){ ?>
            <option value="0"  selected>Selecciona la cantidad</option>
              <?php } ?>
            <option value="30" <?=(($fila['dato_pago']=='30') && ($fila['forma_pago']=='pagare'))?'selected':'';?>>30 </option>
            <option value="40" <?=(($fila['dato_pago']=='40') && ($fila['forma_pago']=='pagare'))?'selected':'';?>>40 </option>
            <option value="60" <?=(($fila['dato_pago']=='60') && ($fila['forma_pago']=='pagare'))?'selected':'';?>>60 </option>
            </select>
      </div>
    </div>
  </div>
</div>

JS:

<script>
  //Función que nos permite habilitar o desahabilitar la opción del pagaré.
  function habilitar(value) {
    console.log(value);
    if (value == "pagare") {
      // habilitamos
      document.getElementById("pagarePlazo").disabled = false;
      document.getElementById("pagare").disabled = false;
      jQuery('#pagarePlazo').removeClass('disabled');
    } else if (value != "pagare") {
      // deshabilitamos
      document.getElementById("pagarePlazo").selectedIndex = "0";
      document.getElementById("pagarePlazo").disabled = true;

      if (value == "domiciliado") {
        // habilitamos
        document.getElementById("domicilioC").disabled = false;
      } else if (value != "domiciliado") {
        // deshabilitamos
        document.getElementById("domicilioC").value = "";
        document.getElementById("domicilioC").disabled = true;
      }
    }
  }
</script>

javascript jquery html5 html

asked by Miguel C 19.04.2018 в 14:28

source

1 answer

is there a row limit for a table using the jquery dataTable plugin? Send several "entry" fields in a signal_callback

score 0 · Accepted Answer

Since the library you use does not have a logic to handle the disabled state, you should program it yourself.

You could edit the same source file if you host the js.

In this line you should check if the item is disabled with this.el.disabled .

But you could modify the prototype.

//modificar comportamiento por defecto para no hacer nada si esta disabled
var originalToggle = SelectFx.prototype._toggleSelect;
SelectFx.prototype._toggleSelect = function() {
  if (this.el.disabled) {
    return;
  } else {
    originalToggle.call(this);
  }
};

//iniciar select
new SelectFx(document.querySelector("select.cs-select"));


function toggle() {
  var el = document.querySelector("select.cs-select");
  el.disabled = !el.disabled;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

body {
  font-weight: 400;
  font-size: 1em;
  padding: 35px 10px;
  border-right: 25px solid #fff;
  border-left: 25px solid #fff;
  font-family: 'Raleway', Arial, sans-serif;
}

body::before,
body::after {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 25px;
  background: #fff;
  z-index: 1001;
}

body::after {
  top: auto;
  bottom: 0;
}

section {
  margin-top: 100px;
  padding: 4% 1em 10%;
  text-align: center;
}

<link href="https://tympanus.net/Development/SelectInspiration/css/cs-select.css" rel="stylesheet" />
<link href="https://tympanus.net/Development/SelectInspiration/css/cs-skin-slide.css" rel="stylesheet" />
<script src="https://tympanus.net/Development/SelectInspiration/js/classie.js"></script>
<script src="https://tympanus.net/Development/SelectInspiration/js/selectFx.js"></script>

<section>
  <label class="select-label">Seleccionar</label>
  <select class="cs-select cs-skin-slide">
    <option value="0" disabled selected>Cantidad</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
  </select>
</section>
<br/>
<button onclick="toggle()">Habilitar/deshabilitar</button>