0
I have the following code:
$("input[type='radio'][class='tipo']").click(function() {
url = $(this).attr('data-route');
id = $(this).attr('id');
$.ajax({
url: url,
type: "POST",
dataType: "json",
data: {
'model' : $(this).val()
},
beforeSend: function () {
},
success: function (response) {
if (response !== null) {
response.forEach(function(field, i) {
$("div."+field.field).show().find("input, select, radio").attr("required", "req");
})
id === "mm"
? (
$("label#bdj1").click(),
$("label#bdj2").prop("title","Essa máquina só aceita 1 bandeja"),
$("label#bdj2").off("click")
)
: (
$("label#bdj2").prop("title", ""),
$("label#bdj2").on("click",function() {
return true;
})
)
}
}
});
});
div.btnyesno > input[type="radio"] {
display: none;
}
div.btnyesno {
position: relative;
display: flex;
width: 200px;
height: 70px;
}
div.btnyesno > div.containerball {
position: relative;
display: flex;
align-items: center;
width: 100px;
height: 50px;
border: 1px solid #000;
border-radius: 500px;
}
div.btnyesno > div.containerball > div.ball {
position: absolute;
display: flex;
left: 50px;
width: 45px;
height: 45px;
background: #ccc;
align-items: center;
justify-content: center;
border-radius: 500px;
transition: all 500ms;
}
div.btnyesno > label{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
cursor: pointer;
}
div.btnyesno > label.yes {
left: -10px;
}
div.btnyesno > label.no {
right: -10px;
}
#bloq:checked ~ #label {
left: 5px !important;
}
#desboq:checked ~ #label {
right: 5px !important;
}
.btnYes {
left: 5px !important;
}
.btnNo {
right: 5px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input
type='radio'
class='tipo'
name='tipo'
id='m5'
data-route='https://mvca.com.br/admn/choice/model'
value='m5'
>Pneumática D 430
<input
type='radio'
class='tipo'
name='tipo'
id='ac'
data-route='https://mvca.com.br/admn/choice/model'
value='ac'
>Acessórios
<div class="bandejas">
<label>Bandejas</label>
<div class="btnyesno">
<input type="radio" name="bandejas" id="bdj_1" value="1">
<input type="radio" name="bandejas" id="bdj_2" value="2">
<label role="button" for="bdj_1" id="bdj1" class="yes">1</label>
<div class="containerball">
<div class="ball"></div>
</div>
<label role="button" for="bdj_2" id="bdj2" class="no">2</label>
</div>
</div>
I need to deactivate the call to the event .click() but in the LABEL
e.preventDefault();
Didn’t work!
I’ve tried to Return and Return false. Also doesn’t work!
Some guidance?
EDIT:
It works like this, I have a group of radio-Buttons with the same name. OK! But here only put 2 not to pollute.
By clicking on radio that has value = "mm", then I need to deactivate the label
EDIT 2:
I’ve tried it like this
id === "mm"
? (
$("label#bdj1").click(),
$("label#bdj2").prop("title","Essa máquina só aceita 1 bandeja"),
$("label#bdj2").off("click")
)
: (
$("label#bdj2").prop("title", ""),
$("label#bdj2").on("click", function(){
console.log("Teste.....");
})
Before selecting the radio button which is equal to "mm", the button works normally, both for one side and the other.
However, when selecting the button "mm", the off()
occurs correctly. Then, when selecting again an option other than "mm", then the message is displayed
teste.....
That is, the click worked. But the button (the ball) does not run to the right!
If you want to remove an event is with
jquery.off()
.– Augusto Vasques
Guy worked. But when I click on another option you need to release the event. It would be ..on("click")? I tried and I couldn’t!
– Carlos Rocha
I’ve tried these 2 options and they don’t work $("label#bdj2"). on("click",Function() { Return true; }), $("label#bdj2"). bind("click")
– Carlos Rocha
Reinstall the event in the same way
$("label#bdj2").on('click',.......
. If I’m not mistakenbind()
was depreciated.– Augusto Vasques
would be true returm??? where are the .......
– Carlos Rocha
I tried that already and did not restore it. $("label#bdj2"). on("click",Function() { Return true; }). In fact I now need to restore the event so that when it is called, it is available
– Carlos Rocha
Modify the MCVE to see how you’re doing so I can get a sense of how to help you.
– Augusto Vasques
I made the changes and added comments at the end of the question! Detail: www.mcva.com.br is just an Apache Virualhost. But this has nothing to do with the doubt ok?
– Carlos Rocha
@Augustovasques. I made the changes you requested.
– Carlos Rocha
Cara pq vc does not simply put a CSS
pointer-events: none;
on the label?– hugocsl
then,@hugocsl worked. but I need $("label#bdj2"). prop("title","This machine only accepts 1 tray"), working and this feature is blocking the title. Is there any resource for this?
– Carlos Rocha